/**
 * Recursos Conversápolis — estilos del front.
 *
 * Paleta y tokens fijados en PLAN-IMPLEMENTACION.md §2.2 (extraídos del kit real
 * de Elementor/Kadence del sitio). No inventar colores nuevos: si falta un matiz,
 * se deriva de estos con color-mix(), nunca con un hex nuevo.
 */

.cvp-contenedor {
	--cvp-morado: #593f91;
	--cvp-azul: #3b8ccb;
	--cvp-verde: #72b52b;
	--cvp-amarillo: #fab80e;
	--cvp-azul-claro: #d3ecfb;
	--cvp-verde-claro: #d6fdd0;
	--cvp-texto: #373634;
	--cvp-texto-fuerte: #000000;
	--cvp-blanco: #ffffff;
	--cvp-gris-borde: #e6e6ea;
	--cvp-gris-suave: #f5f5f7;
	--cvp-radio: 14px;
	--cvp-radio-sm: 999px;
	--cvp-sombra: 0 1px 2px rgba(24, 16, 42, .06), 0 8px 24px rgba(24, 16, 42, .08);
	--cvp-sombra-hover: 0 2px 4px rgba(24, 16, 42, .08), 0 16px 40px rgba(24, 16, 42, .14);
	--cvp-transicion: 180ms cubic-bezier(.4, 0, .2, 1);
	--cvp-fuente: 'Fira Sans', system-ui, -apple-system, sans-serif;
	--cvp-offset-superior: 0px; /* Lo calcula frontend.js según la cabecera del tema. */
	/* Margen propio: no depende del tema. Cuando la página usa un layout a ancho
	   completo (fullwidth/unboxed, igual que las páginas reales de recursos), no
	   hay ningún contenedor del tema que aporte aire a los lados — sin esto el
	   texto queda pegado al borde de la pantalla en móvil. */
	--cvp-padding-x: clamp(1rem, 4vw, 2rem);

	font-family: var(--cvp-fuente);
	color: var(--cvp-texto);
	max-width: 100%;
	box-sizing: border-box;
	padding-inline: var(--cvp-padding-x);
	padding-block: 1.5rem clamp(2rem, 5vw, 3.5rem);
}

.cvp-contenedor *,
.cvp-contenedor *::before,
.cvp-contenedor *::after {
	box-sizing: border-box;
}

.cvp-contenedor img {
	max-width: 100%;
	display: block;
}

.cvp-contenedor .cvp-titulo-seccion {
	font-family: var(--cvp-fuente);
	font-weight: 900;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	color: var(--cvp-morado);
	margin: 0 0 1.75rem;
}

/* Cabecera con el color y el icono del tipo (Vídeos, Guías, Podcast, Cursos):
   cada página de tipo tiene su propia identidad en vez de un título genérico
   igual para las cuatro. */
.cvp-contenedor .cvp-cabecera-tipo {
	--cvp-color-tipo: var(--cvp-morado);
	display: flex;
	align-items: center;
	gap: 1rem;
	background: linear-gradient(120deg, var(--cvp-color-tipo) 0%, color-mix(in srgb, var(--cvp-color-tipo) 82%, #000) 100%);
	color: var(--cvp-blanco);
	border-radius: var(--cvp-radio);
	padding: 1.5rem 1.75rem;
	margin: 0 0 2rem;
}

.cvp-contenedor .cvp-cabecera-tipo__icono {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.cvp-contenedor .cvp-cabecera-tipo__icono svg {
	width: 100%;
	height: 100%;
}

.cvp-contenedor .cvp-cabecera-tipo__titulo {
	font-family: var(--cvp-fuente);
	font-weight: 900;
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
	color: var(--cvp-blanco);
	margin: 0;
}

.cvp-contenedor .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Foco visible propio y consistente, por encima del que traiga el tema. */
.cvp-contenedor a:focus-visible,
.cvp-contenedor button:focus-visible,
.cvp-contenedor input:focus-visible,
.cvp-contenedor summary:focus-visible {
	outline: 3px solid var(--cvp-morado);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Barra de filtros — sticky, dos estados (expandida / compacta)
   ========================================================================== */

.cvp-contenedor .cvp-barra {
	position: sticky;
	top: var(--cvp-offset-superior);
	z-index: 30;
	background: transparent;
	/* Full-bleed: el fondo (visible solo en estado compacto) llega de borde a
	   borde de la pantalla, no solo hasta el margen del contenedor — así no
	   quedan franjas del fondo de la página a los lados al hacer scroll. El
	   padding interno vuelve a colocar tipos/buscador/filtros donde estaban. */
	margin-inline: calc(-1 * var(--cvp-padding-x));
	padding: 1rem var(--cvp-padding-x);
	transition: background-color var(--cvp-transicion), box-shadow var(--cvp-transicion), padding var(--cvp-transicion);
}

.cvp-contenedor .cvp-barra--compacta {
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 12px rgba(24, 16, 42, .08);
	padding: .5rem 0;
}

.cvp-contenedor .cvp-barra__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

/* --- Tipos (las 4 tarjetas / píldoras) --- */

.cvp-contenedor .cvp-tipos {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.cvp-contenedor .cvp-tipo {
	--cvp-color-tipo: var(--cvp-morado);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 2px solid var(--cvp-gris-borde);
	background: var(--cvp-blanco);
	border-radius: var(--cvp-radio-sm);
	padding: .65rem 1.1rem;
	font-family: var(--cvp-fuente);
	font-weight: 700;
	font-size: .95rem;
	color: var(--cvp-texto);
	cursor: pointer;
	transition: all var(--cvp-transicion);
	line-height: 1.2;
}

.cvp-contenedor .cvp-tipo:hover {
	border-color: var(--cvp-color-tipo);
	transform: translateY(-1px);
}

.cvp-contenedor .cvp-tipo.is-activo {
	background: var(--cvp-color-tipo);
	border-color: var(--cvp-color-tipo);
	color: var(--cvp-blanco);
}

/* El amarillo (Cursos) no lleva texto blanco encima: falla contraste AA. */
.cvp-contenedor .cvp-tipo.is-activo[style*="fab80e"] {
	color: var(--cvp-texto);
}

.cvp-contenedor .cvp-tipo__icono {
	width: 20px;
	height: 20px;
	flex: none;
	display: inline-flex;
}

.cvp-contenedor .cvp-tipo__icono svg {
	width: 100%;
	height: 100%;
}

.cvp-contenedor .cvp-tipo__conteo {
	font-size: .78rem;
	font-weight: 700;
	background: rgba(0, 0, 0, .08);
	border-radius: var(--cvp-radio-sm);
	padding: .1rem .5rem;
	min-width: 1.5em;
	text-align: center;
}

.cvp-contenedor .cvp-tipo.is-activo .cvp-tipo__conteo {
	background: rgba(255, 255, 255, .28);
}

.cvp-contenedor .cvp-tipo.is-activo[style*="fab80e"] .cvp-tipo__conteo {
	background: rgba(0, 0, 0, .12);
}

/* Estado compacto: píldoras más pequeñas, sin conteo, texto oculto salvo activo */
.cvp-contenedor .cvp-barra--compacta .cvp-tipo {
	padding: .4rem .7rem;
	font-size: .82rem;
	gap: .35rem;
}

.cvp-contenedor .cvp-barra--compacta .cvp-tipo__icono {
	width: 16px;
	height: 16px;
}

.cvp-contenedor .cvp-barra--compacta .cvp-tipo__conteo {
	display: none;
}

/* --- Buscador --- */

.cvp-contenedor .cvp-buscador {
	position: relative;
	flex: 1 1 220px;
	max-width: 320px;
}

.cvp-contenedor .cvp-buscador__icono {
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--cvp-texto);
	opacity: .5;
	pointer-events: none;
}

.cvp-contenedor .cvp-buscador__campo {
	width: 100%;
	font-family: var(--cvp-fuente);
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.4;
	padding: .65rem 1rem .65rem 2.5rem;
	border: 1px solid var(--cvp-gris-borde);
	border-radius: var(--cvp-radio-sm);
	background: var(--cvp-gris-suave);
	color: var(--cvp-texto);
	box-shadow: none;
	transition: border-color var(--cvp-transicion), background-color var(--cvp-transicion), box-shadow var(--cvp-transicion);
}

/* El tema pinta los placeholder en amarillo de marca; dentro del buscador eso
   se lee como un campo con error, no como texto de ayuda. Se fuerza un gris
   neutro (y con !important porque la regla del tema también lo lleva). */
.cvp-contenedor .cvp-buscador__campo::placeholder {
	color: #8a8a93 !important;
	opacity: 1;
	font-style: normal;
	font-weight: 400;
}

.cvp-contenedor .cvp-buscador__campo::-webkit-input-placeholder {
	color: #8a8a93 !important;
	opacity: 1;
}

.cvp-contenedor .cvp-buscador__campo:hover {
	border-color: #d6d6de;
	background: var(--cvp-blanco);
}

.cvp-contenedor .cvp-buscador__campo:focus {
	border-color: var(--cvp-morado);
	background: var(--cvp-blanco);
	box-shadow: 0 0 0 3px rgba(89, 63, 145, .12);
	outline: none;
}

.cvp-contenedor .cvp-buscador__campo:focus + .cvp-buscador__icono,
.cvp-contenedor .cvp-buscador:focus-within .cvp-buscador__icono {
	color: var(--cvp-morado);
	opacity: 1;
}

.cvp-contenedor .cvp-buscador__campo::-webkit-search-cancel-button {
	cursor: pointer;
}

/* --- Pie de la barra: contador + orden en la misma línea --- */

.cvp-contenedor .cvp-barra__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: .9rem;
}

/* --- Selector de orden --- */

.cvp-contenedor .cvp-orden {
	flex: none;
}

.cvp-contenedor .cvp-orden__campo {
	font-family: var(--cvp-fuente);
	font-size: .9rem;
	color: var(--cvp-texto);
	padding: .6rem 2rem .6rem .9rem;
	border: 1px solid var(--cvp-gris-borde);
	border-radius: var(--cvp-radio-sm);
	background-color: var(--cvp-blanco);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23373634' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .6rem center;
	background-size: 16px 16px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color var(--cvp-transicion), box-shadow var(--cvp-transicion);
}

.cvp-contenedor .cvp-orden__campo:hover {
	border-color: #d6d6de;
}

.cvp-contenedor .cvp-orden__campo:focus-visible {
	border-color: var(--cvp-morado);
	box-shadow: 0 0 0 3px rgba(89, 63, 145, .12);
	outline: none;
}

/* --- Subtemas: una sola fila deslizable --- */

.cvp-contenedor .cvp-subtemas-carrusel {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: .9rem;
}

.cvp-contenedor .cvp-subtemas {
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	overflow-x: auto;
	/* OJO: no se pone scroll-behavior: smooth aquí. El CSS acaba mandando sobre
	   el "behavior" que se pasa en scrollBy(), y el desplazamiento suave no se
	   ejecuta con la pestaña en segundo plano: las flechas se quedaban muertas.
	   Lo decide el JS en cada llamada (ver enlazarCarruselSubtemas). */
	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* Edge antiguo */
	padding: 2px 0;                /* deja respirar el anillo de foco */
	/* Se difuminan los extremos para que se vea que la fila continúa. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.cvp-contenedor .cvp-subtemas::-webkit-scrollbar {
	display: none;                 /* Chrome/Safari: se navega arrastrando */
}

/* Mientras se arrastra con el ratón: sin selección de texto accidental. */
.cvp-contenedor .cvp-subtemas.is-arrastrando {
	cursor: grabbing;
	user-select: none;
}

.cvp-contenedor .cvp-subtemas__flecha {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cvp-gris-borde);
	border-radius: 50%;
	background: var(--cvp-blanco);
	color: var(--cvp-texto);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(24, 16, 42, .10);
	transition: all var(--cvp-transicion);
	z-index: 2;
}

.cvp-contenedor .cvp-subtemas__flecha svg {
	width: 16px;
	height: 16px;
}

.cvp-contenedor .cvp-subtemas__flecha:hover {
	border-color: var(--cvp-morado);
	color: var(--cvp-morado);
}

.cvp-contenedor .cvp-subtemas__flecha--izq {
	margin-right: -12px;
}

.cvp-contenedor .cvp-subtemas__flecha--der {
	margin-left: -12px;
}

/* En pantallas táctiles no hacen falta: se desliza con el dedo. */
@media (hover: none) {
	.cvp-contenedor .cvp-subtemas__flecha {
		display: none !important;
	}
}

.cvp-contenedor .cvp-subtema {
	display: inline-flex;
	flex: none;
	white-space: nowrap;
	align-items: center;
	gap: .4rem;
	font-family: var(--cvp-fuente);
	font-size: .85rem;
	font-weight: 500;
	color: var(--cvp-texto);
	padding: .4rem .85rem;
	border: 1px solid var(--cvp-gris-borde);
	border-radius: var(--cvp-radio-sm);
	background: var(--cvp-blanco);
	cursor: pointer;
	transition: all var(--cvp-transicion);
}

.cvp-contenedor .cvp-subtema:hover {
	border-color: var(--cvp-morado);
	color: var(--cvp-morado);
}

.cvp-contenedor .cvp-subtema.is-activo {
	background: var(--cvp-morado);
	border-color: var(--cvp-morado);
	color: var(--cvp-blanco);
}

.cvp-contenedor .cvp-subtema__conteo {
	font-size: .75rem;
	font-weight: 700;
	padding: .05rem .4rem;
	border-radius: var(--cvp-radio-sm);
	background: var(--cvp-gris-suave);
	color: var(--cvp-texto);
}

.cvp-contenedor .cvp-subtema.is-activo .cvp-subtema__conteo {
	background: rgba(255, 255, 255, .22);
	color: var(--cvp-blanco);
}

/* --- Botón "Filtros" --- */

.cvp-contenedor .cvp-abrir-filtros {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 2px solid var(--cvp-gris-borde);
	background: var(--cvp-blanco);
	border-radius: var(--cvp-radio-sm);
	padding: .65rem 1.1rem;
	font-family: var(--cvp-fuente);
	font-weight: 700;
	font-size: .95rem;
	color: var(--cvp-texto);
	cursor: pointer;
	transition: all var(--cvp-transicion);
	margin-left: auto;
}

.cvp-contenedor .cvp-abrir-filtros:hover {
	border-color: var(--cvp-morado);
}

.cvp-contenedor .cvp-abrir-filtros svg {
	width: 18px;
	height: 18px;
}

.cvp-contenedor .cvp-abrir-filtros__n {
	background: var(--cvp-morado);
	color: var(--cvp-blanco);
	border-radius: var(--cvp-radio-sm);
	font-size: .75rem;
	font-weight: 700;
	min-width: 1.4em;
	line-height: 1.4em;
	text-align: center;
	padding: 0 .35em;
}

/* --- Chips de filtros activos --- */

.cvp-contenedor .cvp-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	overflow-x: auto;
	margin-top: .65rem;
	scrollbar-width: thin;
}

.cvp-contenedor .cvp-chips:empty {
	margin-top: 0;
}

.cvp-contenedor .cvp-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--cvp-azul-claro);
	color: var(--cvp-morado);
	border-radius: var(--cvp-radio-sm);
	padding: .35rem .5rem .35rem .85rem;
	font-size: .85rem;
	font-weight: 700;
	white-space: nowrap;
	animation: cvp-chip-entra 160ms ease-out;
}

.cvp-contenedor .cvp-chip button {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--cvp-transicion);
}

.cvp-contenedor .cvp-chip button:hover {
	background: rgba(89, 63, 145, .15);
}

.cvp-contenedor .cvp-chip button svg {
	width: 12px;
	height: 12px;
}

@keyframes cvp-chip-entra {
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: scale(1); }
}

/* --- Contador de resultados --- */

.cvp-contenedor .cvp-resultado {
	margin: 0;
	font-size: .9rem;
	color: var(--cvp-texto);
}

.cvp-contenedor .cvp-resultado strong {
	color: var(--cvp-morado);
	font-size: 1.05em;
}

/* ==========================================================================
   Grid y tarjetas
   ========================================================================== */

.cvp-contenedor .cvp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 1.75rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.cvp-grid--cols-3,
	.cvp-contenedor .cvp-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.cvp-contenedor .cvp-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.cvp-contenedor .cvp-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
	.cvp-contenedor .cvp-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.cvp-contenedor .cvp-tarjeta {
	--cvp-color-tipo: var(--cvp-morado);
	background: var(--cvp-blanco);
	border-radius: var(--cvp-radio);
	overflow: hidden;
	box-shadow: var(--cvp-sombra);
	transition: transform var(--cvp-transicion), box-shadow var(--cvp-transicion);
	opacity: 0;
	transform: translateY(12px);
	animation: cvp-tarjeta-entra 320ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Escalonado de entrada: 40ms por tarjeta, tope en la 8ª. */
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(1) { animation-delay: 0ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(2) { animation-delay: 40ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(3) { animation-delay: 80ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(4) { animation-delay: 120ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(5) { animation-delay: 160ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(6) { animation-delay: 200ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(7) { animation-delay: 240ms; }
.cvp-contenedor .cvp-grid > .cvp-tarjeta:nth-child(n+8) { animation-delay: 280ms; }

@keyframes cvp-tarjeta-entra {
	to { opacity: 1; transform: translateY(0); }
}

.cvp-contenedor .cvp-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: var(--cvp-sombra-hover);
}

.cvp-contenedor .cvp-tarjeta__enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cvp-contenedor .cvp-tarjeta__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cvp-gris-suave);
}

.cvp-contenedor .cvp-tarjeta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
}

.cvp-contenedor .cvp-tarjeta:hover .cvp-tarjeta__media img {
	transform: scale(1.04);
}

/* Portada de respaldo cuando no hay imagen destacada: nunca un hueco roto. */
.cvp-contenedor .cvp-tarjeta__portada {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 1.25rem;
	text-align: center;
	background: linear-gradient(135deg, var(--cvp-color-tipo) 0%, color-mix(in srgb, var(--cvp-color-tipo) 78%, #000) 100%);
	overflow: hidden;
}

.cvp-contenedor .cvp-tarjeta__patron {
	position: absolute;
	right: -20px;
	bottom: -20px;
	width: 60%;
	height: 60%;
	opacity: .12;
	pointer-events: none;
}

.cvp-contenedor .cvp-tarjeta__icono-grande {
	width: 42px;
	height: 42px;
	color: var(--cvp-blanco);
	opacity: .35;
}

.cvp-contenedor .cvp-tarjeta__icono-grande svg {
	width: 100%;
	height: 100%;
}

.cvp-contenedor .cvp-tarjeta__titulo-portada {
	font-family: var(--cvp-fuente);
	font-weight: 900;
	color: var(--cvp-blanco);
	font-size: 1.05rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 26ch;
}

.cvp-contenedor .cvp-tarjeta__tipo {
	position: absolute;
	top: .75rem;
	left: .75rem;
	background: var(--cvp-blanco);
	color: var(--cvp-color-tipo);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .3rem .6rem;
	border-radius: var(--cvp-radio-sm);
}

.cvp-contenedor .cvp-tarjeta__dato {
	position: absolute;
	bottom: .75rem;
	right: .75rem;
	background: rgba(0, 0, 0, .55);
	color: var(--cvp-blanco);
	font-size: .72rem;
	font-weight: 700;
	padding: .25rem .55rem;
	border-radius: 6px;
}

.cvp-contenedor .cvp-tarjeta__cuerpo {
	display: block;
	padding: 1.4rem 1.5rem 1.6rem;
}

.cvp-contenedor .cvp-tarjeta__titulo {
	display: block;
	font-family: var(--cvp-fuente);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--cvp-texto-fuerte);
	margin-bottom: .55rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cvp-contenedor .cvp-tarjeta__resumen {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--cvp-texto);
	opacity: .75;
	margin-bottom: 1rem;
}

.cvp-contenedor .cvp-tarjeta__temas {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.cvp-contenedor .cvp-tarjeta__tema {
	font-size: .72rem;
	font-weight: 700;
	background: var(--cvp-gris-suave);
	color: var(--cvp-texto);
	padding: .2rem .55rem;
	border-radius: var(--cvp-radio-sm);
	/* Sin esto, un nombre de tema largo (los hay: "Herramientas ludico-
	   prácticas para formadores con enfoque en niños, niñas, jóvenes y sus
	   familias.") envuelve en 4-5 líneas y el radio de 999px deforma la
	   pastilla en una especie de burbuja. Una etiqueta siempre en una sola
	   línea, recortada con puntos suspensivos; el nombre completo queda
	   disponible al pasar el cursor (title). */
	max-width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cvp-contenedor .cvp-tarjeta__tema--mas {
	background: transparent;
	opacity: .6;
}

/* --- Skeleton de carga --- */

.cvp-contenedor .cvp-tarjeta--cargando {
	animation: none;
	opacity: 1;
	transform: none;
	box-shadow: var(--cvp-sombra);
}

.cvp-contenedor .cvp-shimmer {
	position: relative;
	display: block;
	background: var(--cvp-gris-suave);
	overflow: hidden;
}

.cvp-contenedor .cvp-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
	animation: cvp-shimmer-mueve 1.3s infinite;
}

.cvp-contenedor .cvp-shimmer--linea {
	height: .8rem;
	border-radius: 4px;
	margin-bottom: .55rem;
}

.cvp-contenedor .cvp-shimmer--titulo {
	height: 1.1rem;
	width: 80%;
}

.cvp-contenedor .cvp-shimmer--corta {
	width: 55%;
}

@keyframes cvp-shimmer-mueve {
	100% { transform: translateX(100%); }
}

/* ==========================================================================
   Estado vacío
   ========================================================================== */

.cvp-contenedor .cvp-vacio {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 3.5rem 1.5rem;
	gap: .5rem;
	color: var(--cvp-texto);
}

.cvp-contenedor .cvp-vacio__icono {
	width: 48px;
	height: 48px;
	color: var(--cvp-morado);
	opacity: .5;
	margin-bottom: .5rem;
}

.cvp-contenedor .cvp-vacio__titulo {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0;
}

.cvp-contenedor .cvp-vacio__texto {
	opacity: .75;
	margin: 0 0 .75rem;
	max-width: 40ch;
}

/* ==========================================================================
   Botones genéricos
   ========================================================================== */

.cvp-contenedor .cvp-boton {
	font-family: var(--cvp-fuente);
	font-weight: 700;
	font-size: .92rem;
	border-radius: var(--cvp-radio-sm);
	padding: .7rem 1.4rem;
	cursor: pointer;
	transition: all var(--cvp-transicion);
	border: 2px solid transparent;
}

.cvp-contenedor .cvp-boton--primario {
	background: var(--cvp-morado);
	color: var(--cvp-blanco);
}

.cvp-contenedor .cvp-boton--primario:hover {
	background: color-mix(in srgb, var(--cvp-morado) 85%, #000);
}

.cvp-contenedor .cvp-boton--secundario {
	background: var(--cvp-blanco);
	color: var(--cvp-morado);
	border-color: var(--cvp-morado);
}

.cvp-contenedor .cvp-boton--secundario:hover {
	background: var(--cvp-azul-claro);
}

.cvp-contenedor .cvp-boton--texto {
	background: transparent;
	color: var(--cvp-texto);
	text-decoration: underline;
	padding: .7rem .5rem;
}

/* ==========================================================================
   Panel de filtros (drawer)
   ========================================================================== */

.cvp-contenedor .cvp-panel[hidden] {
	display: none !important;
}

.cvp-contenedor .cvp-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.cvp-contenedor .cvp-panel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 40, .45);
	opacity: 0;
	transition: opacity var(--cvp-transicion);
}

.cvp-contenedor .cvp-panel.is-abierto .cvp-panel__overlay {
	opacity: 1;
}

.cvp-contenedor .cvp-panel__hoja {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 100%);
	background: var(--cvp-blanco);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
	box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
}

.cvp-contenedor .cvp-panel.is-abierto .cvp-panel__hoja {
	transform: translateX(0);
}

.cvp-contenedor .cvp-panel__manija {
	display: none;
}

.cvp-contenedor .cvp-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--cvp-gris-borde);
	flex: none;
}

.cvp-contenedor .cvp-panel__titulo {
	font-family: var(--cvp-fuente);
	font-weight: 900;
	font-size: 1.15rem;
	color: var(--cvp-morado);
	margin: 0;
}

.cvp-contenedor .cvp-panel__cerrar {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cvp-texto);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color var(--cvp-transicion);
}

.cvp-contenedor .cvp-panel__cerrar:hover {
	background: var(--cvp-gris-suave);
}

.cvp-contenedor .cvp-panel__cerrar svg {
	width: 20px;
	height: 20px;
}

.cvp-contenedor .cvp-panel__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.1rem 1.25rem;
}

.cvp-contenedor .cvp-panel__grupo {
	margin-bottom: 1.5rem;
}

.cvp-contenedor .cvp-panel__grupo-titulo {
	font-family: var(--cvp-fuente);
	font-weight: 700;
	font-size: .95rem;
	color: var(--cvp-texto-fuerte);
	margin: 0 0 .75rem;
	cursor: default;
	list-style: none;
}

.cvp-contenedor .cvp-panel__grupo--plegado > summary::-webkit-details-marker {
	display: none;
}

.cvp-contenedor .cvp-panel__grupo--plegado > summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cvp-contenedor .cvp-panel__grupo--plegado > summary::after {
	content: "+";
	font-weight: 900;
	font-size: 1.1rem;
	color: var(--cvp-morado);
}

.cvp-contenedor .cvp-panel__grupo--plegado[open] > summary::after {
	content: "–";
}

.cvp-contenedor .cvp-panel__pie {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--cvp-gris-borde);
}

/* --- Árbol de temas --- */

.cvp-arbol,
.cvp-arbol__hijos,
.cvp-contenedor .cvp-lista-simple {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cvp-contenedor .cvp-arbol__nodo {
	position: relative;
}

.cvp-contenedor .cvp-arbol__etiqueta {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .1rem;
	cursor: pointer;
	font-size: .92rem;
}

.cvp-contenedor .cvp-arbol__etiqueta input {
	width: 18px;
	height: 18px;
	accent-color: var(--cvp-morado);
	flex: none;
}

.cvp-contenedor .cvp-arbol__nombre {
	flex: 1 1 auto;
}

.cvp-contenedor .cvp-arbol__conteo {
	font-size: .78rem;
	color: var(--cvp-texto);
	opacity: .55;
	font-weight: 700;
}

.cvp-contenedor .cvp-arbol__nodo--vacio .cvp-arbol__etiqueta {
	opacity: .4;
	cursor: not-allowed;
}

.cvp-contenedor .cvp-arbol__desplegar {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin: 0 0 .3rem 1.9rem;   /* alineado bajo el nombre, no bajo la casilla */
	padding: .15rem .5rem .15rem .4rem;
	background: var(--cvp-gris-suave);
	border: none;
	border-radius: var(--cvp-radio-sm);
	cursor: pointer;
	font-family: var(--cvp-fuente);
	font-size: .75rem;
	font-weight: 600;
	color: var(--cvp-morado);
	transition: background-color var(--cvp-transicion);
}

.cvp-contenedor .cvp-arbol__desplegar:hover {
	background: #ece5f7;
}

.cvp-contenedor .cvp-arbol__desplegar-icono {
	width: 14px;
	height: 14px;
	transition: transform var(--cvp-transicion);
}

.cvp-contenedor .cvp-arbol__desplegar[aria-expanded="true"] .cvp-arbol__desplegar-icono {
	transform: rotate(90deg);
}

.cvp-contenedor .cvp-arbol__hijos {
	padding-left: 1.5rem;
	overflow: hidden;
	max-height: 500px;
	transition: max-height 220ms ease;
}

.cvp-contenedor .cvp-arbol__hijos[hidden] {
	display: block;
	max-height: 0;
}

.cvp-contenedor .cvp-lista-simple label {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .1rem;
	cursor: pointer;
	font-size: .92rem;
}

.cvp-contenedor .cvp-lista-simple label input {
	width: 18px;
	height: 18px;
	accent-color: var(--cvp-morado);
}

.cvp-contenedor .cvp-lista-simple__conteo {
	margin-left: auto;
	font-size: .78rem;
	opacity: .55;
	font-weight: 700;
}

.cvp-contenedor .cvp-lista-simple__item--vacio label {
	opacity: .4;
}

/* ==========================================================================
   Paginación
   ========================================================================== */

.cvp-contenedor .cvp-paginacion {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.cvp-contenedor .cvp-paginacion__lista {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
}

.cvp-contenedor .cvp-paginacion__enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 .7rem;
	border-radius: var(--cvp-radio-sm);
	color: var(--cvp-texto);
	text-decoration: none;
	font-weight: 700;
	font-size: .9rem;
	transition: all var(--cvp-transicion);
}

.cvp-contenedor .cvp-paginacion__enlace:hover {
	background: var(--cvp-azul-claro);
}

.cvp-contenedor .cvp-paginacion__enlace.is-actual {
	background: var(--cvp-morado);
	color: var(--cvp-blanco);
}

.cvp-contenedor .cvp-paginacion__enlace.is-deshabilitado {
	opacity: .35;
	pointer-events: none;
}

.cvp-contenedor .cvp-paginacion__salto {
	opacity: .5;
	padding: 0 .3rem;
}

/* ==========================================================================
   Responsive: móvil
   ========================================================================== */

@media (max-width: 767px) {
	.cvp-contenedor .cvp-barra__interior {
		gap: .5rem;
	}

	/* Los 4 tipos, con su texto, se envolvían en tres filas y la barra entera se
	   comía casi la mitad de la pantalla. Igual que los subtemas: una sola fila
	   que se desliza con el dedo. */
	.cvp-contenedor .cvp-tipos {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		flex: 1 1 100%;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
	}

	.cvp-contenedor .cvp-tipos::-webkit-scrollbar {
		display: none;
	}

	.cvp-contenedor .cvp-tipo {
		flex: none;
	}

	.cvp-contenedor .cvp-tipo__texto {
		display: none;
	}

	.cvp-contenedor .cvp-barra:not(.cvp-barra--compacta) .cvp-tipo__texto {
		display: inline;
	}

	/* El buscador siempre ocupa su propia fila a ancho completo en móvil, tanto
	   expandido como compacto. Colapsarlo a un icono con max-width no es fiable:
	   un <input> tiene un ancho mínimo intrínseco que el navegador no siempre
	   respeta al forzarlo por debajo con max-width, y el resultado se ve roto
	   (el campo se sale de su contenedor). Fila propia = siempre correcto. */
	.cvp-contenedor .cvp-buscador {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.cvp-contenedor .cvp-barra--compacta .cvp-barra__interior {
		flex-wrap: nowrap;
	}

	.cvp-contenedor .cvp-barra--compacta .cvp-buscador {
		order: 0;
		flex: 1 1 auto;
		min-width: 0; /* permite que el buscador ceda espacio sin desbordar la fila */
	}

	.cvp-contenedor .cvp-barra--compacta .cvp-tipos {
		flex: none;
	}

	.cvp-contenedor .cvp-barra--compacta .cvp-abrir-filtros {
		flex: none;
		padding: .65rem;
		position: relative;
	}

	/* En compacto+móvil el botón de filtros se reduce a solo icono. Se oculta el
	   texto SOLO visualmente (no con display:none) para que el botón conserve su
	   nombre accesible "Filtros" para lectores de pantalla. */
	.cvp-contenedor .cvp-barra--compacta .cvp-abrir-filtros span:not(.cvp-abrir-filtros__n) {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	/* El número de filtros activos pasa a ser un punto en la esquina del icono. */
	.cvp-contenedor .cvp-barra--compacta .cvp-abrir-filtros__n {
		position: absolute;
		top: -2px;
		right: -2px;
		min-width: 1.1rem;
		height: 1.1rem;
		line-height: 1.1rem;
		font-size: .65rem;
		padding: 0;
	}

	.cvp-contenedor .cvp-panel__hoja {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: auto;
		height: 85vh;
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
	}

	.cvp-contenedor .cvp-panel.is-abierto .cvp-panel__hoja {
		transform: translateY(0);
	}

	.cvp-contenedor .cvp-panel__manija {
		display: block;
		width: 40px;
		height: 4px;
		background: var(--cvp-gris-borde);
		border-radius: var(--cvp-radio-sm);
		margin: .5rem auto 0;
	}

	.cvp-contenedor .cvp-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.cvp-contenedor .cvp-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Tarjetas de tipo (widget de Elementor "Tarjetas de tipo de recurso")
   ========================================================================== */

.cvp-contenedor .cvp-tipos-hub {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}

@media (min-width: 700px) {
	.cvp-contenedor .cvp-tipos-hub--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cvp-contenedor .cvp-tipos-hub__tarjeta {
	--cvp-color-tipo: var(--cvp-morado);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	text-align: center;
	text-decoration: none;
	color: var(--cvp-blanco);
	background: linear-gradient(160deg, var(--cvp-color-tipo) 0%, color-mix(in srgb, var(--cvp-color-tipo) 80%, #000) 100%);
	border-radius: var(--cvp-radio);
	padding: 2.25rem 1.5rem;
	min-height: 190px;
	overflow: hidden;
	transition: transform var(--cvp-transicion), box-shadow var(--cvp-transicion);
	box-shadow: var(--cvp-sombra);
}

.cvp-contenedor .cvp-tipos-hub__tarjeta:hover,
.cvp-contenedor .cvp-tipos-hub__tarjeta:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--cvp-sombra-hover);
	color: var(--cvp-blanco);
}

.cvp-contenedor .cvp-tipos-hub__tarjeta::after {
	content: "";
	position: absolute;
	inset: auto -10% -30% -10%;
	height: 60%;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 0 2px, transparent 3px);
	background-size: 16px 16px;
	opacity: .5;
	pointer-events: none;
}

.cvp-contenedor .cvp-tipos-hub__icono {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}

.cvp-contenedor .cvp-tipos-hub__icono svg {
	width: 100%;
	height: 100%;
}

.cvp-contenedor .cvp-tipos-hub__nombre {
	position: relative;
	z-index: 1;
	font-family: var(--cvp-fuente);
	font-weight: 900;
	font-size: 1.15rem;
}

.cvp-contenedor .cvp-tipos-hub__conteo {
	position: relative;
	z-index: 1;
	font-size: .8rem;
	font-weight: 700;
	opacity: .85;
}

/* ==========================================================================
   Recurso individual (plantillas/single-recurso.php)
   ========================================================================== */

.cvp-contenedor.cvp-single {
	max-width: 760px;
	margin-inline: auto;
}

.cvp-contenedor .cvp-single__cabecera {
	--cvp-color-tipo: var(--cvp-morado);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: color-mix(in srgb, var(--cvp-color-tipo) 12%, #fff);
	color: var(--cvp-color-tipo);
	border-radius: var(--cvp-radio-sm);
	padding: .4rem .9rem .4rem .5rem;
	font-weight: 700;
	font-size: .85rem;
	margin-bottom: 1rem;
}

.cvp-contenedor .cvp-single__cabecera-icono {
	width: 22px;
	height: 22px;
}

.cvp-contenedor .cvp-single__cabecera-icono svg {
	width: 100%;
	height: 100%;
}

.cvp-contenedor .cvp-single__titulo {
	font-family: var(--cvp-fuente);
	font-weight: 900;
	font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
	color: var(--cvp-texto-fuerte);
	margin: 0 0 .5rem;
	line-height: 1.2;
}

.cvp-contenedor .cvp-single__metadatos {
	color: var(--cvp-texto);
	opacity: .7;
	font-size: .95rem;
	margin: 0 0 1.5rem;
}

.cvp-contenedor .cvp-single__portada {
	border-radius: var(--cvp-radio);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.cvp-contenedor .cvp-single__portada img {
	width: 100%;
	height: auto;
}

.cvp-contenedor .cvp-single__media {
	margin-bottom: 1.5rem;
}

.cvp-contenedor .cvp-single__media iframe {
	max-width: 100%;
	border-radius: var(--cvp-radio);
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.cvp-contenedor .cvp-single__resumen {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--cvp-texto);
	margin-bottom: 1.75rem;
}

.cvp-contenedor .cvp-single__pdf {
	margin-bottom: 1.75rem;
}

.cvp-contenedor .cvp-single__pdf-visor {
	width: 100%;
	height: 640px;
	border: 1px solid var(--cvp-gris-borde);
	border-radius: var(--cvp-radio);
	margin-bottom: 1rem;
	display: block;
}

.cvp-contenedor .cvp-single__enlace-externo {
	margin-bottom: 1.75rem;
}

.cvp-contenedor .cvp-single__temas {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2.5rem;
}

.cvp-contenedor .cvp-single__relacionados {
	border-top: 1px solid var(--cvp-gris-borde);
	padding-top: 2rem;
}

/* ==========================================================================
   Bloques de contenido (PLAN-MODULO-ALTA-V2.md §3.4)
   ========================================================================== */

.cvp-contenedor .cvp-bloques {
	margin-bottom: 1.5rem;
}

.cvp-contenedor .cvp-bloque {
	margin-bottom: 1.5rem;
}

.cvp-contenedor .cvp-bloque--parrafo {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--cvp-texto);
}

.cvp-contenedor .cvp-bloque--subtitulo {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--cvp-texto-fuerte);
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.cvp-contenedor .cvp-bloque--imagen {
	margin: 0 0 1.5rem;
}

.cvp-contenedor .cvp-bloque--imagen img {
	width: 100%;
	height: auto;
	border-radius: var(--cvp-radio);
	display: block;
}

.cvp-contenedor .cvp-bloque--imagen figcaption {
	font-size: .85rem;
	color: var(--cvp-texto);
	opacity: .75;
	margin-top: .5rem;
	text-align: center;
}

.cvp-contenedor .cvp-bloque--video iframe {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--cvp-radio);
}

.cvp-contenedor .cvp-bloque--pdf .cvp-single__pdf-visor {
	width: 100%;
	height: 640px;
	border: 1px solid var(--cvp-gris-borde);
	border-radius: var(--cvp-radio);
	margin-bottom: 1rem;
	display: block;
}

.cvp-contenedor .cvp-bloque--destacado {
	padding: 1.25rem 1.5rem;
	background: var(--cvp-azul-claro);
	border-left: 4px solid var(--cvp-morado);
	border-radius: 0 var(--cvp-radio) var(--cvp-radio) 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--cvp-texto-fuerte);
}

/* ==========================================================================
   Accesibilidad: menos movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.cvp-contenedor *,
	.cvp-contenedor *::before,
	.cvp-contenedor *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
	}

	.cvp-contenedor .cvp-tarjeta {
		opacity: 1;
		transform: none;
	}
}