/**
 * Blog JJ Frías · portada dinámica.
 *
 * El namespace aula-jjpb evita colisiones con el diseño anterior conservado
 * en style.css. No utiliza filtros, cabeceras sticky ni transformaciones para
 * mantener una composición estable también en Safari.
 */

.aula-parent-blog-v2-page,
.aula-parent-blog-v2-page .aula-site-main {
	background: #f4f7f6;
}

.aula-parent-blog-v2-page .aula-parent-blog-v2-page,
.aula-parent-blog-v2-page .wp-block-shortcode {
	margin-block: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.aula-jjpb {
	--jjpb-ink: #18323a;
	--jjpb-muted: #5b6d72;
	--jjpb-paper: #fffefa;
	--jjpb-mist: #f4f7f6;
	--jjpb-cream: #fff7e4;
	--jjpb-sea: #187d73;
	--jjpb-sea-dark: #12645d;
	--jjpb-coral: #df685f;
	--jjpb-sun: #f4c95d;
	--jjpb-border: #d5e1de;
	--jjpb-shadow: 0 16px 38px rgba(24, 50, 58, 0.1);
	background: var(--jjpb-mist);
	color: var(--jjpb-ink);
	font-family: var(--wp--preset--font-family--body, Inter, Aptos, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	max-width: none;
	width: 100%;
}

.aula-jjpb *,
.aula-jjpb *::before,
.aula-jjpb *::after {
	box-sizing: border-box;
}

.aula-jjpb :where(h1, h2, h3, p, figure) {
	margin-block: 0;
}

.aula-jjpb :where(h1, h2, h3) {
	color: var(--jjpb-ink);
	font-family: var(--wp--preset--font-family--display, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif);
	letter-spacing: -0.025em;
	line-height: 1.08;
}

.aula-jjpb a {
	color: inherit;
	text-decoration: none;
}

.aula-jjpb :where(a, button, input):focus-visible {
	outline: 3px solid var(--jjpb-sun);
	outline-offset: 3px;
}

.aula-jjpb-shell {
	margin-inline: auto;
	max-width: 1240px;
	padding-inline: clamp(1rem, 3vw, 2rem);
	width: 100%;
}

.aula-jjpb-sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.aula-jjpb-eyebrow {
	color: var(--jjpb-sea-dark);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Hero */
.aula-jjpb-hero {
	background:
		linear-gradient(115deg, rgba(255, 247, 228, 0.98), rgba(235, 247, 243, 0.96));
	border-bottom: 1px solid var(--jjpb-border);
	overflow: hidden;
	position: relative;
}

.aula-jjpb-hero::before,
.aula-jjpb-hero::after {
	border-radius: 999px;
	content: "";
	pointer-events: none;
	position: absolute;
}

.aula-jjpb-hero::before {
	background: rgba(244, 201, 93, 0.3);
	height: 17rem;
	right: -7rem;
	top: -8rem;
	width: 17rem;
}

.aula-jjpb-hero::after {
	background: rgba(231, 111, 104, 0.12);
	bottom: -6rem;
	height: 13rem;
	left: 40%;
	width: 13rem;
}

.aula-jjpb-hero__inner {
	align-items: center;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	grid-template-columns: minmax(0, 1fr) minmax(390px, 0.92fr);
	min-height: 0;
	padding-block: clamp(2.25rem, 3vw, 3rem);
	position: relative;
	z-index: 1;
}

.aula-jjpb-hero__copy {
	min-width: 0;
}

.aula-jjpb-hero__copy h1 {
	font-size: clamp(2.8rem, 5vw, 5rem);
	max-width: 11ch;
	padding-top: 0.65rem;
}

.aula-jjpb-hero__lead {
	color: #3f5960;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.65;
	max-width: 38rem;
	padding-top: 1.1rem;
}

.aula-jjpb-search {
	max-width: 40rem;
	padding-top: 1.6rem;
}

.aula-jjpb-search > label {
	display: block;
	font-size: 0.86rem;
	font-weight: 750;
	margin-bottom: 0.45rem;
}

.aula-jjpb-search__control {
	align-items: center;
	background: #ffffff;
	border: 1px solid #c7d7d3;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(24, 50, 58, 0.08);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	overflow: hidden;
	padding: 0.3rem;
}

.aula-jjpb-search__control > span {
	color: var(--jjpb-sea-dark);
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1;
	padding-inline: 0.65rem 0.35rem;
}

.aula-jjpb-search input {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--jjpb-ink);
	font: inherit;
	min-width: 0;
	padding: 0.7rem 0.55rem;
	width: 100%;
}

.aula-jjpb-search input:focus {
	outline: 0;
}

.aula-jjpb-search button {
	appearance: none;
	background: var(--jjpb-sea-dark);
	border: 0;
	border-radius: 7px;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	min-height: 2.8rem;
	padding: 0.65rem 1.15rem;
}

.aula-jjpb-search button:hover {
	background: #0d514c;
}

.aula-jjpb-hero__origin {
	color: var(--jjpb-muted);
	font-size: 0.86rem;
	padding-top: 0.75rem;
}

.aula-jjpb-hero__origin a {
	color: var(--jjpb-sea-dark);
	font-weight: 800;
}

.aula-jjpb-hero__visual {
	background: #dcece7;
	border: 10px solid rgba(255, 255, 255, 0.74);
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(24, 50, 58, 0.18);
	display: grid;
	gap: 0.55rem;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.75fr);
	grid-template-rows: 1fr 1fr;
	height: 430px;
	min-width: 0;
	overflow: hidden;
	padding: 0.55rem;
	position: relative;
}

.aula-jjpb-hero__tile {
	background: #b8d8d1;
	border-radius: 12px;
	min-height: 0;
	overflow: hidden;
}

.aula-jjpb-hero__tile--1 {
	grid-row: 1 / -1;
}

.aula-jjpb-hero__tile:only-of-type {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.aula-jjpb-hero__tile img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.aula-jjpb-hero__tile span {
	align-items: center;
	color: var(--jjpb-sea-dark);
	display: flex;
	font-family: var(--wp--preset--font-family--display, ui-rounded, sans-serif);
	font-size: 4rem;
	font-weight: 800;
	height: 100%;
	justify-content: center;
}

.aula-jjpb-hero__visual > p {
	background: var(--jjpb-ink);
	border-radius: 7px 0 0 0;
	bottom: 0;
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 0.65rem 0.85rem;
	position: absolute;
	right: 0;
	text-transform: uppercase;
}

.aula-jjpb-hero__fallback {
	align-items: center;
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	justify-content: center;
}

.aula-jjpb-hero__fallback strong {
	color: var(--jjpb-sea-dark);
	font-family: var(--wp--preset--font-family--display, ui-rounded, sans-serif);
	font-size: 7rem;
	line-height: 1;
}

.aula-jjpb-hero__fallback span {
	color: var(--jjpb-muted);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Categorías remotas reales */
.aula-jjpb-topics {
	background: var(--jjpb-paper);
	border-bottom: 1px solid var(--jjpb-border);
}

.aula-jjpb-topics__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	justify-content: center;
	padding-block: 1.15rem;
}

.aula-jjpb-topics a {
	align-items: center;
	background: #f7faf9;
	border: 1px solid #d8e3e0;
	border-radius: 999px;
	color: #355158;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 750;
	gap: 0.45rem;
	line-height: 1;
	padding: 0.65rem 0.85rem;
	white-space: nowrap;
}

.aula-jjpb-topics a span {
	align-items: center;
	background: #e8f1ef;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
	justify-content: center;
	min-height: 1.35rem;
	min-width: 1.35rem;
	padding-inline: 0.3rem;
}

.aula-jjpb-topics a:hover,
.aula-jjpb-topics a.is-current {
	background: var(--jjpb-sea-dark);
	border-color: var(--jjpb-sea-dark);
	color: #ffffff;
}

.aula-jjpb-topics a.is-current span {
	background: rgba(255, 255, 255, 0.18);
}

/* Contenido y encabezados */
.aula-jjpb-main {
	background: var(--jjpb-mist);
	padding-block: clamp(2.25rem, 3vw, 3rem);
}

.aula-jjpb-heading,
.aula-jjpb-bridge__heading {
	align-items: end;
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	margin-bottom: clamp(1rem, 1.5vw, 1.4rem);
}

.aula-jjpb-heading > div,
.aula-jjpb-bridge__heading > div {
	min-width: 0;
}

.aula-jjpb-heading h2,
.aula-jjpb-bridge__heading h2 {
	font-size: clamp(2rem, 3.6vw, 3rem);
	padding-top: 0.38rem;
}

.aula-jjpb-heading > div > p:last-child {
	color: var(--jjpb-muted);
	max-width: 46rem;
	padding-top: 0.55rem;
}

.aula-jjpb-clear,
.aula-jjpb-bridge__heading > a {
	border-bottom: 2px solid var(--jjpb-sun);
	color: var(--jjpb-sea-dark);
	flex: 0 0 auto;
	font-size: 0.9rem;
	font-weight: 800;
	padding-bottom: 0.2rem;
}

.aula-jjpb-notice {
	background: #fff8dc;
	border: 1px solid #ecd88f;
	border-radius: 8px;
	color: #5d5129;
	font-size: 0.9rem;
	margin-bottom: 1.25rem;
	padding: 0.8rem 1rem;
}

/* Tarjetas remotas */
.aula-jjpb-mosaic {
	align-items: start;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.85fr);
}

.aula-jjpb-mosaic__small {
	align-content: start;
	align-items: start;
	align-self: start;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aula-jjpb-grid {
	align-items: stretch;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 1.25rem;
}

.aula-jjpb-card {
	background: var(--jjpb-paper);
	border: 1px solid var(--jjpb-border);
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba(24, 50, 58, 0.06);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

/* WordPress puede añadir un párrafo vacío tras el enlace de imagen. */
.aula-jjpb-card > p:empty {
	display: none;
}

.aula-jjpb-card:hover,
.aula-jjpb-card:focus-within {
	border-color: #a9c4be;
	box-shadow: var(--jjpb-shadow);
}

.aula-jjpb-card__media {
	background: #dcece7;
	display: block;
	overflow: hidden;
	position: relative;
}

.aula-jjpb-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.aula-jjpb-card__placeholder {
	align-items: center;
	background: linear-gradient(135deg, #d9eee8, #fff2cc);
	color: var(--jjpb-sea-dark);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	min-height: 180px;
}

.aula-jjpb-card__placeholder strong {
	font-family: var(--wp--preset--font-family--display, ui-rounded, sans-serif);
	font-size: 3.6rem;
	line-height: 1;
}

.aula-jjpb-card__placeholder small {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.aula-jjpb-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 1.35rem;
}

.aula-jjpb-card__kicker {
	align-items: center;
	color: var(--jjpb-muted);
	display: flex;
	font-size: 0.72rem;
	font-weight: 750;
	gap: 0.65rem;
	justify-content: space-between;
	line-height: 1.3;
	margin-bottom: 0.65rem;
	text-transform: uppercase;
}

.aula-jjpb-card__kicker a,
.aula-jjpb-card__kicker span:first-child {
	color: var(--jjpb-sea-dark);
	font-weight: 850;
	letter-spacing: 0.05em;
}

.aula-jjpb-card__kicker time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.aula-jjpb-card h3 {
	font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.aula-jjpb-card h3 a:hover,
.aula-jjpb-card h3 a:focus-visible {
	color: var(--jjpb-sea-dark);
}

.aula-jjpb-card__excerpt {
	color: var(--jjpb-muted);
	font-size: 0.93rem;
	line-height: 1.65;
	padding-top: 0.8rem;
}

/* Conserva el CTA al pie aunque wpautop lo envuelva en un párrafo. */
.aula-jjpb-card__body > p:last-child {
	margin-top: auto;
	padding-top: 1rem;
}

.aula-jjpb-card__body > p:last-child > .aula-jjpb-card__read {
	margin-top: 0;
	padding-top: 0;
}

.aula-jjpb-card__read {
	align-items: center;
	color: var(--jjpb-sea-dark);
	display: inline-flex;
	font-size: 0.85rem;
	font-weight: 850;
	gap: 0.3rem;
	margin-top: auto;
	padding-top: 1rem;
}

.aula-jjpb-card--featured .aula-jjpb-card__media {
	aspect-ratio: 16 / 7.5;
}

.aula-jjpb-card--featured .aula-jjpb-card__body {
	padding: clamp(1.15rem, 2.1vw, 1.65rem);
}

.aula-jjpb-card--featured h3 {
	display: -webkit-box;
	font-size: clamp(1.55rem, 2.55vw, 2.05rem);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.aula-jjpb-card--featured .aula-jjpb-card__excerpt {
	display: -webkit-box;
	font-size: 0.95rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.aula-jjpb-card--compact .aula-jjpb-card__media {
	aspect-ratio: 16 / 8.5;
	height: auto;
	min-height: 0;
}

.aula-jjpb-card--compact {
	align-self: start;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.aula-jjpb-card--compact .aula-jjpb-card__placeholder {
	min-height: 126px;
}

.aula-jjpb-card--compact .aula-jjpb-card__body {
	flex: 0 0 auto;
	justify-content: flex-start;
	padding: 0.72rem 0.82rem;
}

.aula-jjpb-card--compact .aula-jjpb-card__kicker {
	display: block;
	font-size: 0.64rem;
	margin-bottom: 0.42rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aula-jjpb-card--compact .aula-jjpb-card__kicker time {
	display: none;
}

.aula-jjpb-card--compact h3 {
	display: -webkit-box;
	font-size: 1rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.15;
	min-height: 2.3em;
	overflow: hidden;
}

.aula-jjpb-card--compact .aula-jjpb-card__excerpt {
	display: -webkit-box;
	font-size: 0.75rem;
	line-height: 1.4;
	padding-top: 0.42rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.aula-jjpb-card--compact .aula-jjpb-card__read {
	font-size: 0.75rem;
	margin-top: 0.5rem;
	padding-top: 0;
}

.aula-jjpb-card--compact .aula-jjpb-card__body > p:last-child {
	margin-top: 0.5rem;
	padding-top: 0;
}

.aula-jjpb-card--standard {
	display: grid;
	grid-template-columns: minmax(175px, 0.64fr) minmax(0, 1.36fr);
	height: 100%;
}

.aula-jjpb-card--standard .aula-jjpb-card__media {
	height: 100%;
	min-height: 230px;
}

.aula-jjpb-card--standard .aula-jjpb-card__body {
	padding: 1.05rem 1.1rem;
}

.aula-jjpb-card--standard h3 {
	display: -webkit-box;
	font-size: clamp(1.12rem, 1.55vw, 1.35rem);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.aula-jjpb-card--standard .aula-jjpb-card__excerpt {
	display: -webkit-box;
	font-size: 0.86rem;
	line-height: 1.55;
	padding-top: 0.6rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.aula-jjpb-card--standard .aula-jjpb-card__read {
	padding-top: 0.7rem;
}

.aula-jjpb-card--standard .aula-jjpb-card__body > p:last-child {
	padding-top: 0.7rem;
}

/* Paginación */
.aula-jjpb-pagination {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.aula-jjpb-pagination__pages {
	align-items: center;
	display: flex;
	gap: 0.4rem;
}

.aula-jjpb-pagination a,
.aula-jjpb-pagination__pages > span {
	align-items: center;
	border: 1px solid #cbdad6;
	border-radius: 7px;
	display: inline-flex;
	font-size: 0.86rem;
	font-weight: 800;
	justify-content: center;
	min-height: 2.65rem;
	min-width: 2.65rem;
	padding: 0.45rem 0.65rem;
}

.aula-jjpb-pagination a:hover,
.aula-jjpb-pagination .is-current {
	background: var(--jjpb-sea-dark);
	border-color: var(--jjpb-sea-dark);
	color: #ffffff;
}

.aula-jjpb-pagination__direction {
	gap: 0.3rem;
	white-space: nowrap;
}

/* Estados vacíos */
.aula-jjpb-empty {
	background: var(--jjpb-paper);
	border: 1px solid var(--jjpb-border);
	border-radius: 12px;
	padding: clamp(2rem, 5vw, 4rem);
	text-align: center;
}

.aula-jjpb-empty h2 {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	padding-top: 0.45rem;
}

.aula-jjpb-empty > p:last-of-type {
	color: var(--jjpb-muted);
	margin-inline: auto;
	max-width: 42rem;
	padding-top: 0.75rem;
}

.aula-jjpb-empty > a {
	background: var(--jjpb-sea-dark);
	border-radius: 7px;
	color: #ffffff;
	display: inline-flex;
	font-weight: 800;
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
}

/* Puente hacia los recursos locales */
.aula-jjpb-bridge {
	background: #e8f1ef;
	border-top: 1px solid #cfdfdb;
	padding-block: clamp(2.25rem, 3vw, 3rem);
}

.aula-jjpb-resources {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aula-jjpb-resource {
	background: var(--jjpb-paper);
	border: 1px solid #cbdcd8;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.aula-jjpb-resource:hover,
.aula-jjpb-resource:focus-within {
	border-color: #9dbdb6;
	box-shadow: 0 12px 28px rgba(24, 50, 58, 0.1);
}

.aula-jjpb-resource__media {
	background: #d8e9e4;
	display: block;
	overflow: hidden;
}

.aula-jjpb-resource__media img {
	display: block;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.aula-jjpb-resource__media > span {
	align-items: center;
	aspect-ratio: 16 / 9;
	color: var(--jjpb-sea-dark);
	display: flex;
	font-family: var(--wp--preset--font-family--display, ui-rounded, sans-serif);
	font-size: 1.35rem;
	font-weight: 800;
	justify-content: center;
}

.aula-jjpb-resource__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.15rem;
}

.aula-jjpb-resource__meta {
	color: var(--jjpb-sea-dark);
	font-size: 0.7rem;
	font-weight: 850;
	letter-spacing: 0.055em;
	line-height: 1.35;
	text-transform: uppercase;
}

.aula-jjpb-resource h3 {
	font-size: 1.2rem;
	padding-top: 0.5rem;
}

.aula-jjpb-resource__body > p:not(.aula-jjpb-resource__meta) {
	color: var(--jjpb-muted);
	font-size: 0.86rem;
	line-height: 1.6;
	padding-top: 0.65rem;
}

.aula-jjpb-resource__open {
	color: var(--jjpb-sea-dark);
	font-size: 0.82rem;
	font-weight: 850;
	margin-top: auto;
	padding-top: 0.9rem;
}

.aula-jjpb-editorial {
	align-items: center;
	background: var(--jjpb-ink);
	border-radius: 14px;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
	margin-top: clamp(1.25rem, 2vw, 2rem);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.aula-jjpb-editorial__copy .aula-jjpb-eyebrow {
	color: #92d8cc;
}

.aula-jjpb-editorial__copy h2 {
	color: #ffffff;
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	max-width: 24ch;
	padding-top: 0.45rem;
}

.aula-jjpb-editorial__copy > p:last-of-type {
	color: #d5e3e1;
	max-width: 48rem;
	padding-top: 0.75rem;
}

.aula-jjpb-editorial__copy > a {
	border-bottom: 2px solid var(--jjpb-sun);
	color: #ffffff;
	display: inline-flex;
	font-weight: 800;
	margin-top: 1.1rem;
	padding-bottom: 0.15rem;
}

.aula-jjpb-license {
	align-items: center;
	align-self: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	color: #e5eeec;
	display: flex;
	gap: 1rem;
	justify-self: stretch;
	padding: 1.2rem;
}

.aula-jjpb-license__mark {
	align-items: center;
	background: var(--jjpb-sun);
	border: 2px solid rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	box-shadow: 0 0 0 4px rgba(244, 201, 93, 0.14);
	color: var(--jjpb-ink);
	display: inline-flex;
	flex: 0 0 auto;
	height: 3.5rem;
	justify-content: center;
	line-height: 1;
	width: 3.5rem;
}

.aula-jjpb-license__mark svg {
	display: block;
	fill: none;
	height: 2.65rem;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3.5;
	width: 2.65rem;
}

.aula-jjpb-license__mark > p:empty {
	display: none;
}

.aula-jjpb-license > div {
	min-width: 0;
}

.aula-jjpb-license strong {
	color: #ffffff;
	display: block;
	font-size: 0.98rem;
}

.aula-jjpb-license p {
	font-size: 0.82rem;
	line-height: 1.55;
	padding-top: 0.25rem;
}

.aula-jjpb-license a {
	color: #ffffff;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* En escritorio, el destacado y el mosaico 2 × 2 comparten la misma base. */
@media (min-width: 1081px) {
	.aula-jjpb-mosaic {
		align-items: stretch;
	}

	.aula-jjpb-mosaic__small {
		align-content: stretch;
		align-items: stretch;
		align-self: stretch;
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.aula-jjpb-card--compact {
		align-self: stretch;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__body {
		flex: 1 1 auto;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__read,
	.aula-jjpb-card--compact .aula-jjpb-card__body > p:last-child {
		margin-top: auto;
		padding-top: 0.5rem;
	}
}

@media (max-width: 1080px) {
	.aula-jjpb-hero__inner {
		gap: 2rem;
		grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
		min-height: 0;
	}

	.aula-jjpb-hero__visual {
		height: 360px;
	}

	.aula-jjpb-mosaic {
		grid-template-columns: minmax(0, 1fr);
	}

	.aula-jjpb-mosaic__small {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 860px) {
	.aula-jjpb-hero__inner {
		gap: 1.75rem;
		grid-template-columns: minmax(0, 1fr);
		padding-block: 2.25rem;
	}

	.aula-jjpb-hero__copy h1 {
		max-width: 14ch;
	}

	.aula-jjpb-hero__visual {
		height: 340px;
	}

	.aula-jjpb-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aula-jjpb-card--standard .aula-jjpb-card__media {
		min-height: 210px;
	}

	.aula-jjpb-resources {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aula-jjpb-resource:last-child {
		grid-column: 1 / -1;
		margin-inline: auto;
		max-width: 480px;
		width: 100%;
	}

	.aula-jjpb-editorial {
		grid-template-columns: minmax(0, 1fr);
	}

	.aula-jjpb-license {
		justify-self: center;
		max-width: 34rem;
		width: 100%;
	}
}

@media (max-width: 700px) {
	.aula-jjpb-shell {
		padding-inline: 1rem;
	}

	.aula-jjpb-hero__inner {
		gap: 1.5rem;
		padding-block: 2.25rem;
	}

	.aula-jjpb-hero__copy h1 {
		font-size: clamp(2.4rem, 12vw, 3.6rem);
	}

	.aula-jjpb-search__control {
		grid-template-columns: auto minmax(0, 1fr);
		padding: 0.35rem;
	}

	.aula-jjpb-search button {
		grid-column: 1 / -1;
		width: 100%;
	}

	.aula-jjpb-hero__visual {
		border-width: 6px;
		height: 300px;
	}

	.aula-jjpb-topics__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 1rem;
		scrollbar-width: thin;
	}

	.aula-jjpb-heading,
	.aula-jjpb-bridge__heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.aula-jjpb-heading h2,
	.aula-jjpb-bridge__heading h2 {
		font-size: 2rem;
	}

	.aula-jjpb-mosaic__small,
	.aula-jjpb-resources {
		grid-template-columns: minmax(0, 1fr);
	}

	.aula-jjpb-card--compact,
	.aula-jjpb-card--standard {
		display: flex;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__media,
	.aula-jjpb-card--standard .aula-jjpb-card__media {
		aspect-ratio: 16 / 9;
		height: auto;
		min-height: 0;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__body {
		padding: 1.1rem;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__kicker {
		display: flex;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__kicker time {
		display: inline;
	}

	.aula-jjpb-card--compact h3 {
		font-size: 1.2rem;
		min-height: 0;
	}

	.aula-jjpb-card--compact .aula-jjpb-card__excerpt {
		font-size: 0.82rem;
	}

	.aula-jjpb-pagination {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.aula-jjpb-pagination__pages {
		justify-content: center;
		order: -1;
		width: 100%;
	}

	.aula-jjpb-pagination__direction {
		flex: 1;
	}

	.aula-jjpb-resource:last-child {
		grid-column: auto;
		max-width: none;
	}

	.aula-jjpb-editorial {
		padding: 1.35rem;
	}
}

@media (max-width: 420px) {
	.aula-jjpb-hero__visual {
		grid-template-columns: 1fr 0.7fr;
		height: 250px;
	}

	.aula-jjpb-hero__visual > p {
		display: none;
	}

	.aula-jjpb-pagination__pages a,
	.aula-jjpb-pagination__pages > span {
		min-height: 2.35rem;
		min-width: 2.35rem;
		padding: 0.35rem;
	}

	.aula-jjpb-license {
		flex-direction: column;
		text-align: center;
	}
}