/*
 * Beat Data — Twenty Twenty-Five Child UI
 * Fase 6: a11y básica, dark mode, copy button, focus visible, skip-to-main.
 * Rediseño: header + footer + cards de post.
 */

/* ============================================================
 * Header (override del padre TT5)
 * El bg + sticky + blur viven AQUÍ (NO en el HTML inline) para que
 * dark mode pueda overridar sin pelearse con !important inline.
 * ============================================================ */
.bd-header {
	font-family: var(--wp--preset--font-family--inter, system-ui), sans-serif;
	background-color: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--wp--preset--color--borde, #e8eee4);
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
}

.bd-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	color: #085172;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	transition: opacity .15s ease;
}
.bd-logo:hover { opacity: .8; }
.bd-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 8px;
	background: linear-gradient(135deg, #085172 0%, #679435 100%);
	color: #fff;
}
.bd-logo__mark svg { width: 22px; height: 22px; }
.bd-logo__text { color: #085172; }
.bd-logo__text span { color: #679435; }

.bd-nav {
	display: inline-flex;
	gap: 26px;
	align-items: center;
}
.bd-nav a {
	color: #515250;
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.bd-nav a:hover { color: #085172; border-bottom-color: #679435; }

.bd-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #679435;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 6px;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}
.bd-header__cta:hover { background: #567a2b; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(103,148,53,.25); }

/* Móvil: nav colapsa */
@media (max-width: 782px) {
	.bd-nav { display: none; }
	.bd-logo__text { font-size: 18px; }
	.bd-header__cta { font-size: 13px; padding: 8px 14px; }
}

/* ============================================================
 * Footer rediseñado — 4 columnas + redes + legal
 * ============================================================ */
.bd-footer { font-family: var(--wp--preset--font-family--inter, system-ui), sans-serif; }
.bd-footer__inner { max-width: 1340px; margin: 0 auto; }
.bd-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.bd-footer__col { color: #cbd5e1; }
.bd-footer__col--brand { max-width: 360px; }
.bd-logo--footer { color: #fff; }
.bd-logo--footer .bd-logo__text { color: #fff; }
.bd-logo--footer .bd-logo__text span { color: #ffce6d; }
.bd-footer__tagline { margin: 18px 0 22px; color: #94a3b8; font-size: 14px; line-height: 1.6; }
.bd-footer__h4 {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin: 0 0 18px;
}
.bd-footer__list { list-style: none; margin: 0; padding: 0; }
.bd-footer__list li { margin-bottom: 10px; }
.bd-footer__list a {
	color: #cbd5e1;
	text-decoration: none;
	font-size: 14px;
	transition: color .15s ease;
}
.bd-footer__list a:hover { color: #ffce6d; }
.bd-footer__list code { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 3px; font-size: 12px; }

.bd-footer__bottom {
	display: flex; justify-content: space-between; align-items: center;
	gap: 24px; flex-wrap: wrap;
	padding-top: 30px;
	font-size: 13px;
	color: #94a3b8;
}
.bd-footer__copy { margin: 0; }
.bd-footer__disclaimer { margin: 0; max-width: 520px; font-size: 12px; opacity: .8; }

/* Social bar dentro del footer: contrastar contra fondo oscuro */
.bd-footer .fp-social-bar__link {
	color: #cbd5e1;
	border-color: rgba(255,255,255,.18);
	background: transparent;
}
.bd-footer .fp-social-bar__link:hover {
	color: #fff !important;
	background: var(--fp-social-color);
	border-color: var(--fp-social-color);
}

@media (max-width: 900px) {
	.bd-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.bd-footer__col--brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
	.bd-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.bd-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
 * Tipografía global de contenido (posts, pages)
 * Refuerza la sensación de "blog editorial" sobre Twenty Twenty-Five.
 * ============================================================ */
.entry-content, .wp-block-post-content {
	font-size: clamp(1.05rem, 1.7vw, 1.18rem);
	line-height: 1.78;
	color: #1f2937;
}
.entry-content p, .wp-block-post-content p { margin: 0 0 1.4em; }
.entry-content > h2, .wp-block-post-content > h2 {
	margin-top: 2.2em; margin-bottom: 0.6em;
	padding-top: 0.5em;
	border-top: 1px solid #e8eee4;
}
.entry-content > h3, .wp-block-post-content > h3 { margin-top: 2em; margin-bottom: 0.5em; }
.entry-content strong, .wp-block-post-content strong { color: #085172; font-weight: 700; }
.entry-content blockquote, .wp-block-post-content blockquote {
	margin: 2em 0; padding: 1.2em 1.5em;
	background: #f7faf6; border-left: 4px solid #679435; border-radius: 0 8px 8px 0;
	font-size: 1.05em; font-style: normal; color: #1f2937;
}
.entry-content ul li, .entry-content ol li,
.wp-block-post-content ul li, .wp-block-post-content ol li { margin-bottom: .55em; }
.entry-content img, .wp-block-post-content img { border-radius: 10px; }

/* Hero del post individual (title + meta) */
.wp-block-post-title {
	font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
	line-height: 1.1 !important;
	color: #085172 !important;
	letter-spacing: -0.02em;
	margin-bottom: 0.4em;
}

/* Featured image debajo del título: protagonista */
.wp-block-post-featured-image img {
	border-radius: 14px;
	box-shadow: 0 20px 50px -15px rgba(8, 81, 114, .18);
}

/* ============================================================
 * Listados (archive, blog, search): cards de post mejoradas
 * Aplica a Query Loop blocks que muestran tarjetas.
 * ============================================================ */
.wp-block-query .wp-block-post {
	background: #fff;
	border: 1px solid #e8eee4;
	border-radius: 14px;
	padding: 0 0 22px;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
	display: flex; flex-direction: column;
	height: 100%;
}
.wp-block-query .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 35px -20px rgba(8, 81, 114, .25);
	border-color: #679435;
}
.wp-block-query .wp-block-post .wp-block-post-featured-image {
	margin: 0 0 18px;
}
.wp-block-query .wp-block-post .wp-block-post-featured-image img {
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: 16/9;
	object-fit: cover;
	width: 100%;
}
.wp-block-query .wp-block-post .wp-block-post-title,
.wp-block-query .wp-block-post-title {
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
	margin: 0 22px 12px !important;
	color: #1e293b !important;
}
.wp-block-query .wp-block-post .wp-block-post-title a:hover { color: #679435 !important; }
.wp-block-query .wp-block-post .wp-block-post-excerpt {
	margin: 0 22px 16px; font-size: 14px; color: #515250; line-height: 1.6;
}
.wp-block-query .wp-block-post .wp-block-post-date {
	margin: 0 22px; font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px;
}
.wp-block-query .wp-block-post .wp-block-post-author-name { color: #679435; font-weight: 600; font-size: 13px; margin: 0 22px; }

/* Grid responsivo automático para Query Loop */
.wp-block-query .wp-block-post-template.is-layout-grid {
	gap: 28px;
}

/* ============================================================
 * Ocultar post_title duplicado en pages cuyo contenido ya incluye su propio hero
 * - Home (page Inicio #668) ya tiene [fp_hero]
 * - Rutas de aprendizaje listing (#745) ya tiene heading propio
 * - Single fp_ruta tiene el hero card del shortcode
 * - Single fp_curso usa plantilla custom
 * ============================================================ */
body.home .wp-block-post-title,
body.page-id-668 .wp-block-post-title,
body.page-id-745 .wp-block-post-title,
body.single-fp_ruta .wp-block-post-title,
body.post-type-archive-fp_ruta .wp-block-post-title,
body.single-fp_ruta .wp-block-post-author-name,
body.single-fp_ruta .wp-block-post-author,
body.single-fp_ruta .wp-block-post-date,
body.single-fp_ruta .wp-block-post-featured-image,
body.single-fp_ruta .wp-block-template-part .wp-block-group:has(.wp-block-post-title) {
	display: none !important;
}
/* Reducir el padding-top del contenedor principal cuando ocultamos el título */
body.home .wp-site-blocks .wp-block-group.has-global-padding > .wp-block-post-content,
body.page-id-668 .wp-site-blocks .wp-block-group.has-global-padding > .wp-block-post-content,
body.page-id-745 .wp-site-blocks .wp-block-group.has-global-padding > .wp-block-post-content,
body.single-fp_ruta .wp-site-blocks .wp-block-group.has-global-padding > .wp-block-post-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Pegar el contenido al header en home, rutas-listing, single ruta y single curso.
   El padre TT5 añade margin-top: var(--wp--preset--spacing--60) al <main> y padding-top
   var(--wp--preset--spacing--50) al wrapper group, lo que crea ~250px de aire vacío
   entre el header sticky y el hero. Lo eliminamos en pages cuyo primer bloque ya es
   un hero a sangre completa. */
body.home main.wp-block-group,
body.page-id-668 main.wp-block-group,
body.page-id-745 main.wp-block-group,
body.single-fp_ruta main.wp-block-group {
	margin-top: 0 !important;
}
body.home .wp-site-blocks > .wp-block-group.has-global-padding,
body.page-id-668 .wp-site-blocks > .wp-block-group.has-global-padding,
body.home .wp-site-blocks > main .wp-block-group.has-global-padding:first-child,
body.page-id-668 .wp-site-blocks > main .wp-block-group.has-global-padding:first-child {
	padding-top: 0 !important;
}
/* También quita el padding-top del primer wp:group dentro del post_content de la home */
body.home .wp-block-post-content > .wp-block-group:first-child,
body.page-id-668 .wp-block-post-content > .wp-block-group:first-child,
body.page-id-745 .wp-block-post-content > .wp-block-group:first-child {
	padding-top: 0 !important;
}

/* ============================================================
 * DARK MODE — fix de cobertura universal
 * Antes solo se aplicaba a body. Ahora redefinimos las CSS vars
 * de WP que TODOS los blocks usan (--wp--preset--color--base).
 * ============================================================ */
html[data-theme="dark"] {
	--wp--preset--color--base: #0f1419;
	--wp--preset--color--contrast: #e6e8ea;
	--wp--preset--color--crema: #1a2129;
	--wp--preset--color--borde: #2a323c;
	--wp--preset--color--gris: #a8b0b8;
	--wp--preset--color--gris-claro: #6b7480;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--wp--preset--color--base: #0f1419;
		--wp--preset--color--contrast: #e6e8ea;
		--wp--preset--color--crema: #1a2129;
		--wp--preset--color--borde: #2a323c;
		--wp--preset--color--gris: #a8b0b8;
		--wp--preset--color--gris-claro: #6b7480;
		color-scheme: dark;
	}
}

/* Asegurar que TODOS los wp-block-group con has-base-background usan la base oscura */
html[data-theme="dark"] .has-base-background-color {
	background-color: var(--wp--preset--color--base) !important;
}
html[data-theme="dark"] .has-base-color {
	color: var(--wp--preset--color--base) !important;
}
html[data-theme="dark"] .has-crema-background-color {
	background-color: var(--wp--preset--color--crema) !important;
}
html[data-theme="dark"] .has-contrast-background-color {
	background-color: #050a0e !important; /* aún más oscuro para zonas "contrast" */
}

/* Cards de post en dark */
html[data-theme="dark"] .wp-block-query .wp-block-post {
	background: var(--wp--preset--color--crema, #1a2129);
	border-color: var(--wp--preset--color--borde, #2a323c);
}
html[data-theme="dark"] .wp-block-query .wp-block-post .wp-block-post-title a {
	color: #e6e8ea !important;
}
html[data-theme="dark"] .wp-block-query .wp-block-post .wp-block-post-title a:hover {
	color: #ffce6d !important;
}

/* Header en dark */
html[data-theme="dark"] .bd-header {
	background-color: rgba(15, 20, 25, 0.92) !important;
	border-bottom-color: var(--wp--preset--color--borde) !important;
}
html[data-theme="dark"] .bd-nav a { color: #cbd5e1; }
html[data-theme="dark"] .bd-nav a:hover { color: #ffce6d; border-bottom-color: #ffce6d; }
html[data-theme="dark"] .bd-logo__text { color: #e6e8ea; }
html[data-theme="dark"] .bd-logo__text span { color: #ffce6d; }

/* Testimonios en dark — fondo oscuro + cards oscuras con borde tenue */
html[data-theme="dark"] .fp-testimonios { background: #050a0e !important; }
html[data-theme="dark"] .fp-testimonios__h2 { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-testi-card {
	background: var(--wp--preset--color--crema, #1a2129) !important;
	border-color: var(--wp--preset--color--borde, #2a323c) !important;
}
html[data-theme="dark"] .fp-testi-card__quote { color: #e6e8ea !important; }
html[data-theme="dark"] .fp-testi-card__footer { border-top-color: var(--wp--preset--color--borde, #2a323c) !important; }
html[data-theme="dark"] .fp-testi-card__name { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-testi-card__course { color: #94a3b8 !important; }
html[data-theme="dark"] .fp-testi-card__stars { color: #ffce6d !important; }

/* FAQ en dark — contraste fuerte */
html[data-theme="dark"] .fp-faq { background: #050a0e !important; }
html[data-theme="dark"] .fp-faq__h2 { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-faq details {
	background: var(--wp--preset--color--crema, #1a2129) !important;
	border-color: var(--wp--preset--color--borde, #2a323c) !important;
}
html[data-theme="dark"] .fp-faq details[open] { border-color: #ffce6d !important; }
html[data-theme="dark"] .fp-faq summary { color: #ffce6d !important; font-weight: 700; }
html[data-theme="dark"] .fp-faq summary::after { color: #ffce6d !important; }
html[data-theme="dark"] .fp-faq details > div,
html[data-theme="dark"] .fp-faq details > div p {
	color: #e6e8ea !important;
	line-height: 1.75;
}

/* Hero v2 en dark */
html[data-theme="dark"] .fp-hero--v2 { background: var(--wp--preset--color--base) !important; }
html[data-theme="dark"] .fp-hero__titulo { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-hero__titulo strong { color: #ffce6d !important; }
html[data-theme="dark"] .fp-hero__descripcion { color: #cbd5e1 !important; }
html[data-theme="dark"] .fp-hero__trust { color: #94a3b8 !important; }
html[data-theme="dark"] .fp-btn--ghost { color: #6cb6ff !important; border-color: #6cb6ff !important; }
html[data-theme="dark"] .fp-btn--ghost:hover { background: #6cb6ff !important; color: #0f1419 !important; }

/* Proof bar en dark */
html[data-theme="dark"] .fp-proof {
	background: var(--wp--preset--color--crema, #1a2129) !important;
	border-color: var(--wp--preset--color--borde, #2a323c) !important;
}
html[data-theme="dark"] .fp-proof__num { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-proof__lab { color: #94a3b8 !important; }

/* Cursos section + cards en dark */
html[data-theme="dark"] .fp-cursos-section { background: var(--wp--preset--color--base) !important; }
html[data-theme="dark"] .fp-cursos-section__h2 { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-cursos-section__sub { color: #cbd5e1 !important; }

/* Author section en dark */
html[data-theme="dark"] .fp-author { background: var(--wp--preset--color--base) !important; }
html[data-theme="dark"] .fp-author h2 { color: #6cb6ff !important; }
html[data-theme="dark"] .fp-author__bio { color: #cbd5e1 !important; }
html[data-theme="dark"] .fp-author__cargo { color: #ffce6d !important; }

/* CTA final en dark (mantiene gradiente azul ya que es CTA) */
html[data-theme="dark"] .fp-cta { background: linear-gradient(135deg, #052032 0%, #031722 100%) !important; }

/* Rutas grid + cards en dark */
html[data-theme="dark"] .fp-rutas-grid { color: #e6e8ea; }
html[data-theme="dark"] .fp-ruta-card {
	background: var(--wp--preset--color--crema, #1a2129);
	border-color: var(--wp--preset--color--borde, #2a323c);
	color: #e6e8ea;
}
html[data-theme="dark"] .fp-ruta-card__title { color: #6cb6ff; }
html[data-theme="dark"] .fp-ruta-card__excerpt,
html[data-theme="dark"] .fp-ruta-card__meta { color: #94a3b8; }

/* Hero de single ruta en dark */
html[data-theme="dark"] .fp-ruta__hero {
	background: linear-gradient(135deg, color-mix(in srgb, var(--ruta-color, #6cb6ff) 12%, #0f1419) 0%, #0f1419 100%);
	border-color: color-mix(in srgb, var(--ruta-color, #6cb6ff) 35%, transparent);
}
html[data-theme="dark"] .fp-ruta__title { color: #6cb6ff; }
html[data-theme="dark"] .fp-ruta__tagline { color: #cbd5e1; }
html[data-theme="dark"] .fp-ruta__stats strong { color: #e6e8ea; }
html[data-theme="dark"] .fp-ruta__para-quien {
	background: var(--wp--preset--color--crema, #1a2129) !important;
	color: #cbd5e1;
}
html[data-theme="dark"] .fp-ruta__intro { color: #cbd5e1; }
html[data-theme="dark"] .fp-ruta__stepper::before { opacity: .35; }
html[data-theme="dark"] .fp-ruta__step { background: var(--wp--preset--color--base); color: #cbd5e1; }
html[data-theme="dark"] .fp-ruta__step:hover { color: #ffce6d; }

/* Cross-link en dark */
html[data-theme="dark"] .fp-curso-rutas-cross {
	background: linear-gradient(135deg, #0f1419 0%, #1a2129 100%);
	border-color: var(--wp--preset--color--borde, #2a323c);
}
html[data-theme="dark"] .fp-curso-rutas-cross__title { color: #6cb6ff; }
html[data-theme="dark"] .fp-curso-rutas-cross__sub { color: #94a3b8; }
html[data-theme="dark"] .fp-curso-rutas-cross__card {
	background: var(--wp--preset--color--crema, #1a2129);
	border-color: var(--wp--preset--color--borde, #2a323c);
}
html[data-theme="dark"] .fp-curso-rutas-cross__nombre { color: #e6e8ea; }
html[data-theme="dark"] .fp-curso-rutas-cross__paso { color: #94a3b8; }

/* Single post content en dark */
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .wp-block-post-content { color: #cbd5e1; }
html[data-theme="dark"] .entry-content strong,
html[data-theme="dark"] .wp-block-post-content strong { color: #6cb6ff; }
html[data-theme="dark"] .entry-content > h2,
html[data-theme="dark"] .wp-block-post-content > h2 {
	border-top-color: var(--wp--preset--color--borde) !important;
	color: #6cb6ff !important;
}
html[data-theme="dark"] .entry-content > h3,
html[data-theme="dark"] .wp-block-post-content > h3 { color: #e6e8ea !important; }
html[data-theme="dark"] .entry-content blockquote,
html[data-theme="dark"] .wp-block-post-content blockquote {
	background: var(--wp--preset--color--crema, #1a2129) !important;
	color: #cbd5e1;
}

/* Forzar legibilidad del post-title del padre TT5 cuando NO está oculto */
html[data-theme="dark"] .wp-block-post-title,
html[data-theme="dark"] .wp-block-post-title a { color: #6cb6ff !important; }

/* Footer en dark — el footer YA es dark de base; solo asegurar contraste */
html[data-theme="dark"] .bd-footer { background-color: #050a0e !important; }

/* ============================================================
 * Header dark mode — FIX agressivo (la barra superior sticky no estaba tomando dark)
 * Causa: el .bd-header tiene background-color con !important via inline style del HTML del header,
 * y backdrop-filter blur sobre rgba(255,255,255,.92) opaca. Forzamos override del inline style.
 * ============================================================ */
html[data-theme="dark"] header.bd-header,
html[data-theme="dark"] .bd-header,
html[data-theme="dark"] header.bd-header[style] {
	background-color: rgba(15, 20, 25, 0.94) !important;
	border-bottom-color: var(--wp--preset--color--borde, #2a323c) !important;
	color: #e6e8ea !important;
}
html[data-theme="dark"] .bd-header .bd-logo,
html[data-theme="dark"] .bd-header .bd-logo:hover { color: #e6e8ea !important; }
html[data-theme="dark"] .bd-header .bd-logo__text { color: #e6e8ea !important; }
html[data-theme="dark"] .bd-header .bd-logo__text span { color: #ffce6d !important; }
html[data-theme="dark"] .bd-header .bd-nav a { color: #cbd5e1 !important; }
html[data-theme="dark"] .bd-header .bd-nav a:hover { color: #ffce6d !important; border-bottom-color: #ffce6d !important; }
html[data-theme="dark"] .bd-header .bd-header__cta { background: #679435 !important; color: #fff !important; }
html[data-theme="dark"] .bd-header .bd-header__cta:hover { background: #567a2b !important; }

/* Igual con prefers-color-scheme: dark cuando no hay [data-theme="light"] */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) header.bd-header,
	html:not([data-theme="light"]) .bd-header {
		background-color: rgba(15, 20, 25, 0.94) !important;
		border-bottom-color: var(--wp--preset--color--borde, #2a323c) !important;
	}
	html:not([data-theme="light"]) .bd-header .bd-logo__text { color: #e6e8ea !important; }
	html:not([data-theme="light"]) .bd-header .bd-logo__text span { color: #ffce6d !important; }
	html:not([data-theme="light"]) .bd-header .bd-nav a { color: #cbd5e1 !important; }
}

/* ============================================================
 * BLOG GRID — cards bonitas para home.html y archive.html
 * Aplica a templates con clase .bd-blog-grid (grid de posts).
 * ============================================================ */
.bd-blog-grid .wp-block-post-template.is-layout-grid {
	gap: 28px !important;
}
.bd-post-card {
	background: #fff;
	border: 1px solid #e8eee4 !important;
	border-radius: 14px !important;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
	display: flex !important;
	flex-direction: column;
	height: 100%;
	margin: 0;
}
.bd-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 35px -20px rgba(8, 81, 114, .25);
	border-color: #679435 !important;
}
.bd-post-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}
.bd-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .4s ease;
}
.bd-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.bd-post-card .wp-block-post-title {
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--inter, system-ui), sans-serif;
}
.bd-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--primary, #085172) !important;
	text-decoration: none !important;
	transition: color .15s ease;
}
.bd-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--verde, #679435) !important; }
.bd-post-card .wp-block-post-excerpt {
	margin: 0 0 12px;
	color: var(--wp--preset--color--gris, #515250);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bd-post-card .wp-block-post-excerpt__more-text { display: none; }
.bd-post-card .wp-block-post-date,
.bd-post-card .wp-block-post-date time {
	color: var(--wp--preset--color--gris-claro, #94a3b8) !important;
	font-weight: 500;
}
.bd-post-card .wp-block-post-terms a {
	color: var(--wp--preset--color--verde, #679435) !important;
	text-decoration: none !important;
}

/* Paginación */
.bd-blog-grid .wp-block-query-pagination {
	margin-top: 50px !important;
	gap: 8px;
	flex-wrap: wrap;
}
.bd-blog-grid .wp-block-query-pagination a,
.bd-blog-grid .wp-block-query-pagination span {
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--borde, #e8eee4);
	color: var(--wp--preset--color--primary, #085172);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	transition: background .15s ease, color .15s ease;
}
.bd-blog-grid .wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--primary, #085172);
	color: #fff;
}
.bd-blog-grid .wp-block-query-pagination .current {
	background: var(--wp--preset--color--primary, #085172);
	color: #fff;
}

/* Blog grid en dark */
html[data-theme="dark"] .bd-post-card {
	background: var(--wp--preset--color--crema, #1a2129) !important;
	border-color: var(--wp--preset--color--borde, #2a323c) !important;
}
html[data-theme="dark"] .bd-post-card .wp-block-post-title a { color: #6cb6ff !important; }
html[data-theme="dark"] .bd-post-card .wp-block-post-title a:hover { color: #ffce6d !important; }
html[data-theme="dark"] .bd-post-card .wp-block-post-excerpt { color: #cbd5e1; }
html[data-theme="dark"] .bd-post-card .wp-block-post-terms a { color: #ffce6d !important; }
html[data-theme="dark"] .bd-blog-grid .wp-block-query-pagination a {
	border-color: var(--wp--preset--color--borde, #2a323c);
	color: #cbd5e1;
}

/* Layout móvil del grid */
@media (max-width: 600px) {
	.bd-blog-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}



/* ============================================================
 * Skip to main content link (WCAG 2.4.1)
 * ============================================================ */
.bd-skip-to-main {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: #085172;
	color: #fff !important;
	padding: 12px 20px;
	text-decoration: none;
	font-weight: 700;
	border-radius: 0 0 6px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bd-skip-to-main:focus,
.bd-skip-to-main:active {
	left: 0;
	top: 0;
	outline: 3px solid #ffce6d;
	outline-offset: 2px;
}

/* ============================================================
 * Focus visible global (WCAG 2.4.7)
 * Solo cuando el foco viene por teclado (no por click).
 * ============================================================ */
:focus { outline: none; }
:focus-visible {
	outline: 3px solid #679435 !important;
	outline-offset: 2px;
	border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
	box-shadow: 0 0 0 4px rgba(103, 148, 53, 0.25);
}

/* ============================================================
 * Dark mode — tokens semánticos
 * El usuario decide via toggle (botón en el body) o se hereda
 * de prefers-color-scheme del SO si no hay preferencia guardada.
 * ============================================================ */

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--bd-bg: #0f1419;
		--bd-bg-card: #1a2129;
		--bd-text: #e6e8ea;
		--bd-text-soft: #a8b0b8;
		--bd-border: #2a323c;
	}
}
html[data-theme="dark"] {
	--bd-bg: #0f1419;
	--bd-bg-card: #1a2129;
	--bd-text: #e6e8ea;
	--bd-text-soft: #a8b0b8;
	--bd-border: #2a323c;
}
html:not([data-theme]) {
	--bd-bg: #ffffff;
	--bd-bg-card: #ffffff;
	--bd-text: #111111;
	--bd-text-soft: #515250;
	--bd-border: #e8eee4;
}
html[data-theme="light"] {
	--bd-bg: #ffffff;
	--bd-bg-card: #ffffff;
	--bd-text: #111111;
	--bd-text-soft: #515250;
	--bd-border: #e8eee4;
}

/* Aplica los tokens al body y a los bloques semánticos del padre TT5. */
html[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) body {
		background-color: var(--bd-bg);
		color: var(--bd-text);
	}
}
html[data-theme="dark"] body {
	background-color: var(--bd-bg);
	color: var(--bd-text);
}
html[data-theme="dark"] .wp-block-post-content,
html[data-theme="dark"] .wp-block-group,
html[data-theme="dark"] .wp-block-cover {
	color: var(--bd-text);
}
html[data-theme="dark"] a:not(.fp-btn):not(.fp-curso-btn):not(.fp-curso-btn-info):not(.wp-element-button) {
	color: #6cb6ff;
}
html[data-theme="dark"] .fp-author,
html[data-theme="dark"] .fp-cursos-section,
html[data-theme="dark"] .fp-hero {
	background-color: var(--bd-bg) !important;
}
html[data-theme="dark"] .fp-proof,
html[data-theme="dark"] .fp-faq {
	background-color: var(--bd-bg-card) !important;
	border-color: var(--bd-border) !important;
}
html[data-theme="dark"] .fp-hero__titulo,
html[data-theme="dark"] .fp-cursos-section__h2,
html[data-theme="dark"] .fp-faq__h2,
html[data-theme="dark"] .fp-author h2 {
	color: #6cb6ff !important;
}
html[data-theme="dark"] .fp-hero__descripcion,
html[data-theme="dark"] .fp-author__bio,
html[data-theme="dark"] .fp-cursos-section__sub,
html[data-theme="dark"] .fp-proof__lab {
	color: var(--bd-text-soft) !important;
}
html[data-theme="dark"] .fp-faq details {
	background: var(--bd-bg) !important;
	border-color: var(--bd-border) !important;
}
html[data-theme="dark"] .fp-curso-card,
html[data-theme="dark"] .fp-curso-countdown {
	background: var(--bd-bg-card) !important;
	border-color: var(--bd-border) !important;
}
html[data-theme="dark"] .fp-curso-card-title { color: var(--bd-text) !important; }
html[data-theme="dark"] .fp-curso-card-excerpt,
html[data-theme="dark"] .fp-curso-card-meta { color: var(--bd-text-soft) !important; }
html[data-theme="dark"] .fp-curso-countdown { color: var(--bd-text) !important; }
html[data-theme="dark"] .fp-curso-countdown-number,
html[data-theme="dark"] .fp-curso-card-precio-unico { color: #6cb6ff !important; }

/* ============================================================
 * Toggle button (dark mode)
 * ============================================================ */
.bd-theme-toggle {
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 9000;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #d0d5db;
	background: #ffffff;
	color: #085172;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
	transition: background .2s ease, transform .2s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bd-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bd-theme-toggle svg { width: 20px; height: 20px; }
html[data-theme="dark"] .bd-theme-toggle {
	background: #1a2129;
	color: #ffce6d;
	border-color: #2a323c;
}
.bd-theme-toggle .bd-icon-sun { display: none; }
.bd-theme-toggle .bd-icon-moon { display: inline-block; }
html[data-theme="dark"] .bd-theme-toggle .bd-icon-sun { display: inline-block; }
html[data-theme="dark"] .bd-theme-toggle .bd-icon-moon { display: none; }

/* ============================================================
 * Bloques de código — wrapper, copy button y Prism
 * ============================================================ */
.bd-code-wrap {
	position: relative;
	margin: 1.4em 0;
}
.bd-code-wrap pre[class*="language-"],
.bd-code-wrap pre {
	margin: 0;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 0.92em;
	line-height: 1.55;
	padding-top: 2.4em; /* sitio para el botón */
}
.bd-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	background: rgba(255,255,255,.12);
	color: #f8f8f2;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: background .15s ease, transform .1s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bd-copy-btn:hover { background: rgba(255,255,255,.22); }
.bd-copy-btn:active { transform: scale(0.96); }
.bd-copy-btn.is-copied { background: #679435; color: #fff; border-color: #679435; }
.bd-copy-btn svg { width: 14px; height: 14px; }

/* Tema Tomorrow ya cargado — ajustar fondo para coherencia con la marca */
pre[class*="language-"],
.bd-code-wrap pre,
pre.wp-block-syntaxhighlighter-code,
pre.wp-block-code,
pre.brush\:csharp, pre.brush\:sql, pre.brush\:python, pre.brush\:javascript, pre.brush\:php, pre.brush\:bash {
	background: #1d2227 !important;
	color: #f8f8f2 !important;
	border-radius: 8px;
	padding: 2.4em 1em 1em;
	overflow-x: auto;
	font-size: 0.92em;
	line-height: 1.55;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.bd-code-wrap pre[class*="language-"] code,
.bd-code-wrap pre code {
	background: transparent;
	color: inherit;
	font-family: inherit;
}

/* Etiqueta del lenguaje (plugin show-language) */
.bd-code-wrap .toolbar { z-index: 3; }
.bd-code-wrap .toolbar .toolbar-item span {
	background: rgba(255, 206, 109, .15);
	color: #ffce6d;
	border-radius: 4px;
	padding: 3px 8px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}