/* ==========================================================================
   MDH · Componentes comunes a todo el sitio
   Mismo lenguaje visual que la página de Testimonios: cabecera oscura con
   retícula, etiquetas cian, botones píldora, tarjetas, animación de entrada,
   vídeos en ventana y llamada a la acción final.
   Depende de las variables de mdh-theme.css.
   ========================================================================== */

/* ---------- Estructura ---------- */
#main { padding-top: 0 !important; }
.mdh-hero ~ .inner-wrap { padding-top: 64px; }
.mdh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Piezas básicas ---------- */
.mdh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--mdh-font-label) !important;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: 14px;
	color: var(--mdh-cyan);
}
.mdh-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }

.mdh-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--mdh-font-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.mdh-btn:hover { transform: translateY(-2px); }
.mdh-btn--primary { background: #fff; color: var(--mdh-navy) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.mdh-btn--primary:hover { background: var(--mdh-cyan); color: #fff !important; }
.mdh-btn--accent { background: var(--mdh-orange); color: #fff !important; box-shadow: 0 8px 24px rgba(239, 159, 39, .4); }
.mdh-btn--accent:hover { background: var(--mdh-orange-dark); }
.mdh-btn--ghost { color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .45); }
.mdh-btn--ghost:hover { border-color: var(--mdh-cyan); background: rgba(55, 192, 232, .12); }
.mdh-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Cabecera de página (hero) ---------- */
.mdh-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: 64px 0 72px;
	background: var(--mdh-grid-dark);
	background-size: var(--mdh-grid-dark-size);
}
.mdh-hero--home { padding: 88px 0 96px; }
.mdh-hero::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -10px;
	width: 520px;
	max-width: 70%;
	height: 260px;
	opacity: .3;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 260'%3E%3Cpolyline points='0,240 110,215 200,150 300,125 420,50 520,10' fill='none' stroke='%237be0c4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg fill='%237be0c4'%3E%3Ccircle cx='110' cy='215' r='8'/%3E%3Ccircle cx='200' cy='150' r='8'/%3E%3Ccircle cx='300' cy='125' r='8'/%3E%3Ccircle cx='420' cy='50' r='10'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain;
}
.mdh-hero__grid { position: relative; z-index: 1; }
.mdh-hero--split .mdh-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
	align-items: center;
}
.mdh-hero__text { max-width: 780px; }
.mdh-hero h1.mdh-hero__title {
	color: #fff !important;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.1;
	font-weight: 800;
	margin: 0 0 18px;
	padding: 0;
}
.mdh-hero--home h1.mdh-hero__title { font-size: clamp(34px, 5vw, 58px); }
.mdh-hero__title .mdh-grad {
	background: linear-gradient(90deg, var(--mdh-cyan), var(--mdh-mint));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mdh-hero__lead { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .82); max-width: 640px; margin: 0 0 28px; }

/* Migas */
.mdh-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
}
.mdh-crumbs li { margin: 0; list-style: none; }
.mdh-crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--mdh-cyan); }
.mdh-crumbs a { color: rgba(255, 255, 255, .85) !important; text-decoration: none; }
.mdh-crumbs a:hover { color: var(--mdh-cyan) !important; }
.mdh-crumbs [aria-current] { color: rgba(255, 255, 255, .55); max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Datos en píldoras */
.mdh-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.mdh-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 14px;
	list-style: none;
	border-radius: 999px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
}
.mdh-chips li a { color: #fff !important; text-decoration: none; }
.mdh-chips li a:hover { color: var(--mdh-cyan) !important; }
.mdh-chips svg { width: 15px; height: 15px; fill: none; stroke: var(--mdh-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Cifras */
.mdh-hero .mdh-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 36px !important;
	padding: 0 !important;
	list-style: none;
}
.mdh-stats li {
	flex: 1 1 140px;
	margin: 0;
	padding: 16px 18px;
	list-style: none;
	border-radius: var(--mdh-radius);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.mdh-stats strong { display: block; font-family: var(--mdh-font-head); font-size: 34px; font-weight: 800; line-height: 1; color: #fff; }
.mdh-stats strong em { font-style: normal; }
.mdh-stats li:last-child strong { color: var(--mdh-orange); }
.mdh-stats span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .7); }

/* Imagen destacada */
.mdh-hero__media {
	position: relative;
	margin: 0;
	border-radius: 20px;
	box-shadow: 0 30px 60px rgba(4, 22, 42, .45);
}
.mdh-hero__media::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 23px;
	background: linear-gradient(135deg, var(--mdh-cyan), var(--mdh-mint), var(--mdh-orange));
	z-index: -1;
}
.mdh-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	border-radius: 20px;
	background: #fff;
}

/* Carrusel de frases */
.mdh-rotator {
	position: relative;
	margin: 0;
	padding: 44px 40px 32px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .96);
	color: var(--mdh-navy-ink);
	box-shadow: 0 30px 60px rgba(4, 22, 42, .45);
}
.mdh-rotator::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 23px;
	padding: 2px;
	background: linear-gradient(135deg, var(--mdh-cyan), var(--mdh-mint), var(--mdh-orange));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.mdh-rotator__mark { position: absolute; top: -22px; left: 36px; width: 56px; height: 44px; fill: var(--mdh-orange); filter: drop-shadow(0 6px 12px rgba(239, 159, 39, .4)); }
.mdh-rotator__slides { display: grid; }
.mdh-rotator__slide {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease, visibility .6s;
}
.mdh-rotator__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.mdh-rotator__slide p {
	margin: 0 0 22px;
	font-family: var(--mdh-font-head) !important;
	font-size: clamp(20px, 2.2vw, 26px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mdh-navy);
}
.mdh-rotator__slide footer { display: flex; flex-direction: column; gap: 2px; font-style: normal; }
.mdh-rotator__slide footer strong { font-family: var(--mdh-font-head); color: var(--mdh-navy-ink); }
.mdh-rotator__slide footer span { font-family: var(--mdh-font-label); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--mdh-slate); }
.mdh-rotator__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.mdh-rotator__dots { display: flex; gap: 8px; }
.mdh-rotator__dots button {
	width: 10px !important;
	height: 10px;
	padding: 0 !important;
	border-radius: 999px !important;
	background: var(--mdh-border) !important;
	box-shadow: none !important;
	transform: none !important;
	filter: none !important;
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
}
.mdh-rotator__dots button[aria-current="true"] { width: 30px !important; background: var(--mdh-cyan) !important; }
.mdh-rotator__more { font-family: var(--mdh-font-head); font-weight: 700; font-size: 14px; color: var(--mdh-blue) !important; text-decoration: none; }
.mdh-rotator__more:hover { color: var(--mdh-cyan) !important; }

/* ---------- Llamada a la acción final ---------- */
.mdh-cta {
	position: relative;
	text-align: center;
	padding: 96px 0;
	color: #fff;
	background: var(--mdh-grid-dark);
	background-size: var(--mdh-grid-dark-size);
}
.mdh-cta h2 { color: #fff !important; font-size: clamp(30px, 4vw, 46px); font-weight: 800; margin: 0 0 16px; padding: 0; }
.mdh-cta p:not(.mdh-eyebrow) { color: rgba(255, 255, 255, .8); font-size: 18px; max-width: 620px; margin: 0 auto 34px; }
.mdh-cta .mdh-actions { justify-content: center; }
.mdh-cta + #colophon, .mdh-cta ~ #colophon { margin-top: 0; }
#main + .mdh-cta { margin-top: 0; }

/* ---------- Tarjetas en listados (categoría, etiqueta, autor, vídeos) ---------- */
.archive #content::before, .archive #content::after { display: none !important; }
.archive #content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
.archive #content > article {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 0 8px !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mdh-border) !important;
	border-radius: 20px !important;
	box-shadow: var(--mdh-shadow);
}
.archive #content > article:hover { border-color: rgba(55, 192, 232, .5) !important; }
.archive #content > article .post-featured-image { order: -1; margin: 0; overflow: hidden; }
.archive #content > article .post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 15 / 7;
	height: auto;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform .5s ease;
}
.archive #content > article:hover .post-featured-image img { transform: scale(1.05); }
.archive #content > article .entry-header { padding: 24px 28px 0; }
.archive #content > article .entry-title { font-size: 21px; line-height: 1.3; margin: 0 0 10px; padding: 0; }
.archive #content > article .entry-title a { text-decoration: none; }
.archive #content > article .entry-content { padding: 0 28px; color: var(--mdh-text); }
.archive #content > article .entry-content p { font-size: 15px; line-height: 1.7; }
.archive #content > article .entry-meta-bar { margin-top: auto; padding: 0 28px 16px; border: 0; }
.archive #content > article .entry-meta { border-top: 1px solid var(--mdh-border); padding-top: 14px; }
.archive #content > .default-wp-page, .archive #content > .pagination, .archive #content > nav { grid-column: 1 / -1; }

/* Paginación anterior / siguiente (listados y entradas) */
ul.default-wp-page {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 0 !important;
	padding: 0;
	list-style: none;
}
ul.default-wp-page li { margin: 0; list-style: none; flex: 0 1 48%; }
ul.default-wp-page li.next { text-align: right; margin-left: auto; }
ul.default-wp-page a {
	display: inline-block;
	padding: 14px 22px;
	border-radius: 14px;
	border: 1px solid var(--mdh-border);
	background: #fff;
	box-shadow: var(--mdh-shadow);
	color: var(--mdh-navy) !important;
	font-family: var(--mdh-font-head);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
ul.default-wp-page a:hover { transform: translateY(-3px); border-color: var(--mdh-cyan); box-shadow: var(--mdh-shadow-hover); color: var(--mdh-blue) !important; }

/* ---------- Entradas ---------- */
.single-post #content > article { max-width: 860px; margin: 0 auto; }
.single-post .entry-content > p { font-size: 17px; line-height: 1.8; }
.single-post .entry-content img { border-radius: 14px; }
.single-post .entry-content h2, .single-post .entry-content h3 { margin-top: 1.6em; }
.single-post .entry-meta-bar { margin-top: 32px; }
.wp-block-columns:not(:has(> .wp-block-column > *)) { display: none; }

/* Barra de progreso de lectura */
.mdh-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 4px;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--mdh-cyan), var(--mdh-mint), var(--mdh-orange));
	pointer-events: none;
}
body.admin-bar .mdh-progress { top: 32px; }

/* Cabecera compacta al hacer scroll */
#masthead { transition: box-shadow .3s ease, background .3s ease; }
#header-logo-image img { transition: width .3s ease, height .3s ease, margin .3s ease; }
body.mdh-scrolled #masthead { box-shadow: 0 1px 0 var(--mdh-border), 0 10px 30px rgba(12, 68, 124, .12); }
@media (min-width: 769px) {
	body.mdh-scrolled #header-logo-image img { width: 190px; height: auto; margin-top: 6px !important; margin-bottom: 6px !important; }
}

/* ---------- Tarjetas de BlockArt y columnas ---------- */
.entry-content .blockart-column > .blockart-column-inner[class] { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }

/* ---------- Vídeos de YouTube como miniatura + ventana ---------- */
.mdh-yt {
	all: unset;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--mdh-blue), var(--mdh-navy-deep)) !important;
	border: 0 !important;
	box-shadow: var(--mdh-shadow) !important;
	filter: none !important;
	transition: transform .3s ease, box-shadow .3s ease !important;
}
.mdh-yt--vertical { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
.mdh-yt--4-3 { aspect-ratio: 4 / 3; }
.mdh-yt:hover { transform: translateY(-4px) !important; box-shadow: var(--mdh-shadow-hover) !important; }
.mdh-yt:focus-visible { outline: 3px solid var(--mdh-cyan); outline-offset: 3px; }
.mdh-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mdh-yt:hover img { transform: scale(1.05); }
.mdh-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 44, 82, .7)); }
.mdh-yt__title {
	position: absolute;
	z-index: 1;
	left: 18px;
	right: 18px;
	bottom: 14px;
	font-family: var(--mdh-font-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mdh-play {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 8px 24px rgba(4, 22, 42, .35);
	transition: transform .25s ease, background .25s ease;
}
.mdh-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent var(--mdh-navy);
}
.mdh-play::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .6);
	animation: mdh-pulse 2.2s ease-out infinite;
}
.mdh-yt:hover .mdh-play { transform: scale(1.1); background: var(--mdh-orange); }
.mdh-yt:hover .mdh-play::before { border-left-color: #fff; }
@keyframes mdh-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before { display: none !important; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { position: static !important; }

.mdh-modal { width: min(960px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.mdh-modal.is-vertical { width: min(420px, 92vw); }
.mdh-modal::backdrop { background: rgba(4, 22, 42, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mdh-modal[open] { animation: mdh-zoom .3s ease; }
@keyframes mdh-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.mdh-modal__box { position: relative; }
.mdh-modal__frame { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.mdh-modal.is-vertical .mdh-modal__frame { aspect-ratio: 9 / 16; max-height: 80vh; margin: 0 auto; }
.mdh-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.mdh-modal__close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 42px !important;
	height: 42px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .3) !important;
	color: #fff !important;
	font-size: 26px;
	line-height: 1;
	box-shadow: none !important;
	filter: none !important;
	cursor: pointer;
}
.mdh-modal__close:hover { background: var(--mdh-orange) !important; transform: rotate(90deg) !important; }
.mdh-modal__yt { display: inline-block; margin-top: 14px; color: rgba(255, 255, 255, .8) !important; font-family: var(--mdh-font-head); font-weight: 600; font-size: 14px; }
.mdh-modal__yt:hover { color: var(--mdh-cyan) !important; }

/* ---------- Animación de entrada ---------- */
.mdh-js [data-mdh-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--mdh-delay, 0s);
}
.mdh-js [data-mdh-reveal].is-in { opacity: 1; transform: none; }
/* Al terminar, las tarjetas recuperan su propio efecto hover */
.mdh-js [data-mdh-reveal].is-done { transition-delay: 0s; }
.mdh-js .archive-card-hover:hover,
.mdh-js .archive #content > article.is-done:hover { transform: translateY(-6px); box-shadow: var(--mdh-shadow-hover); }

@media (prefers-reduced-motion: reduce) {
	.mdh-js [data-mdh-reveal] { opacity: 1; transform: none; }
	.mdh-play::after { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.mdh-hero--split .mdh-hero__grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 768px) {
	.mdh-hero { padding: 48px 0 56px; }
	.mdh-hero--home { padding: 56px 0 72px; }
	.mdh-hero ~ .inner-wrap { padding-top: 40px; }
	.mdh-wrap { padding: 0 16px; }
	.archive #content { grid-template-columns: 1fr; gap: 24px; }
	.mdh-rotator { padding: 40px 24px 26px; }
	.mdh-cta { padding: 72px 0; }
	ul.default-wp-page { flex-direction: column; }
	ul.default-wp-page li { flex-basis: auto; }
}