/**
 * Cabecera / héroe.
 * Versión 2.6.0 — 17/10/2026
 *
 * 2.6.0  El banner de curso pasa a banda a todo el ancho, como la cabecera
 *        estándar: la imagen se queda al ancho del contenido y centrada,
 *        y el negro de la banda la continúa hasta los bordes.
 *
 * 2.5.1  El banner de cabecera va con las esquinas rectas: el redondeo del
 *        diseño es de las tarjetas, no de la cabecera de página.
 *
 * 2.5.0  Formato banner de curso (.dvdrrb-hero--banner) y titular compuesto:
 *        primera parte, destacado en rojo y etiqueta encima.
 *
 * 2.4.0  Altura máxima redondeada a la retícula: fuera el valor medido
 *        con regla sobre el archivo de diseño.
 *
 * 2.3.5  Margen lateral desde la variable --dvdrrb-margen de la hoja base.
 *
 * Nomenclatura BEM. Valores en unidades relativas sobre la retícula de 8px
 * y las variables generadas por theme.json. Sin estilos en línea: la capa
 * oscura y el encuadre se controlan con clases modificadoras.
 *
 * Medidas tomadas del archivo de diseño: banda de 533px de alto, imagen
 * ocupando el 63,3% derecho a toda la altura de la banda.
 */

.dvdrrb-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	isolation: isolate;
}

.dvdrrb-hero.alignfull {
	margin-inline: 0;
	max-width: none;
}

/* --- Alturas -------------------------------------------------------- */

.dvdrrb-hero--alta {
	min-height: clamp(24rem, 18rem + 16vw, 34rem);
}

.dvdrrb-hero--media {
	min-height: clamp(18rem, 14rem + 12vw, 27rem);
}

.dvdrrb-hero--compacta {
	min-height: clamp(12rem, 10rem + 8vw, 19rem);
}

/* --- Imagen --------------------------------------------------------- */

.dvdrrb-hero__media {
	position: absolute;
	inset-block: 0;
	z-index: 0;
}

.dvdrrb-hero__media-img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Encuadre: qué parte de la imagen se conserva al recortar. */

.dvdrrb-hero--encuadre-izquierda .dvdrrb-hero__media-img {
	object-position: left center;
}

.dvdrrb-hero--encuadre-centro .dvdrrb-hero__media-img {
	object-position: center;
}

.dvdrrb-hero--encuadre-derecha .dvdrrb-hero__media-img {
	object-position: right center;
}

/* Capa oscura sobre la imagen, en pasos fijos. */

.dvdrrb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--negro);
	pointer-events: none;
}

.dvdrrb-hero--overlay-0 .dvdrrb-hero__media::after  { opacity: 0; }
.dvdrrb-hero--overlay-20 .dvdrrb-hero__media::after { opacity: 0.2; }
.dvdrrb-hero--overlay-40 .dvdrrb-hero__media::after { opacity: 0.4; }
.dvdrrb-hero--overlay-60 .dvdrrb-hero__media::after { opacity: 0.6; }
.dvdrrb-hero--overlay-80 .dvdrrb-hero__media::after { opacity: 0.8; }

/* --- Imagen de fondo: la altura la manda la imagen -------------------- */

/*
 * Con la imagen al fondo, no se posiciona en absoluto: fluye dentro de la
 * sección, de modo que la cabecera mide exactamente lo que mide la imagen
 * escalada al ancho de la pantalla. Así se ve completa a cualquier
 * resolución, sin recortes y sin altura fija que la limite. El texto pasa
 * a ir superpuesto encima.
 *
 * Doble clase para ganar a los modificadores de altura sin depender del
 * orden en que estén escritas las reglas.
 */
/*
 * Los banners traen negro puro incorporado, mientras que el negro de marca
 * es #0F1010. La diferencia es mínima, pero al tocarse se ve la costura.
 * Con imagen, la banda adopta el mismo negro que ella. Cuando el diseñador
 * exporte los banners con el negro de marca, esta regla puede desaparecer.
 */
.dvdrrb-hero--con-imagen {
	background-color: #000;
}

.dvdrrb-hero.dvdrrb-hero--con-imagen {
	display: grid;
	grid-template-areas: "cabecera";
	min-height: 0;
}

/* Imagen y contenido comparten celda: se superponen sin posición absoluta. */
.dvdrrb-hero--con-imagen > .dvdrrb-hero__media,
.dvdrrb-hero--con-imagen > .dvdrrb-hero__inner {
	grid-area: cabecera;
}

.dvdrrb-hero--con-imagen .dvdrrb-hero__media {
	position: relative;
	inset: auto;
	width: 100%;
}

.dvdrrb-hero--con-imagen .dvdrrb-hero__media-img {
	width: 100%;
	height: auto;
	object-fit: fill;
}

.dvdrrb-hero--con-imagen .dvdrrb-hero__inner {
	align-self: center;
}

/* --- Contenedor ----------------------------------------------------- */

.dvdrrb-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--wp--preset--spacing--50);
	/*
	 * Contenedor de 1240px sin max-width ni márgenes automáticos: el relleno
	 * lateral absorbe todo lo que sobre por encima de ese ancho. Por debajo
	 * de 1240 se queda en los 24px mínimos. Es equivalente visualmente y
	 * mucho más difícil de romper desde otra hoja de estilos.
	 */
	padding-inline: max(var(--dvdrrb-margen), (100% - var(--dvdrrb-ancho)) / 2);
}

.dvdrrb-hero__contenido {
	max-width: 34rem;
}

/*
 * El antetítulo y el subtítulo forman una unidad de lectura con el titular,
 * así que van pegados a él. Tres clases para ganar a la regla de arriba.
 */
.dvdrrb-hero__contenido > .dvdrrb-hero__antetitulo + .dvdrrb-hero__titulo,
.dvdrrb-hero__contenido > .dvdrrb-hero__titulo + .dvdrrb-hero__subtitulo {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* --- Tipografía ----------------------------------------------------- */

/*
 * Los colores se declaran explícitamente y no por herencia: Astra fija el
 * color de los encabezados con una regla directa, y un valor heredado
 * nunca gana a una regla directa.
 */
.dvdrrb-hero .dvdrrb-hero__titulo,
.dvdrrb-hero .dvdrrb-hero__texto,
.dvdrrb-hero .dvdrrb-hero__texto p,
.dvdrrb-hero .dvdrrb-hero__texto strong {
	color: var(--wp--preset--color--blanco);
}

.dvdrrb-hero .dvdrrb-hero__antetitulo,
.dvdrrb-hero .dvdrrb-hero__subtitulo {
	color: var(--wp--preset--color--rojo);
}

.dvdrrb-hero__antetitulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-transform: uppercase;
}

.dvdrrb-hero__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.1;
	text-wrap: balance;
}

.dvdrrb-hero__subtitulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.dvdrrb-hero__texto {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.6;
}

.dvdrrb-hero__texto p + p {
	margin-block-start: var(--wp--preset--spacing--20);
}

.dvdrrb-hero__texto strong {
	font-weight: 700;
}

/* --- Botón ---------------------------------------------------------- */

.dvdrrb-hero__acciones {
	margin-block-start: var(--wp--preset--spacing--20);
}

.dvdrrb-hero__boton {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: 0.25rem;
	background-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.dvdrrb-hero__boton:hover,
.dvdrrb-hero__boton:focus-visible {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--negro);
}

/* --- Móvil ----------------------------------------------------------- */

@media (max-width: 47.9375rem) {

	.dvdrrb-hero__inner {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.dvdrrb-hero__contenido {
		max-width: 100%;
	}

	/*
	 * En móvil la proporción del banner deja una franja demasiado baja para
	 * que quepa el texto, así que la imagen vuelve a recortarse. La capa
	 * oscura NO se toca: manda el desplegable, igual que en escritorio.
	 */
	.dvdrrb-hero.dvdrrb-hero--con-imagen {
		min-height: 22rem;
	}

	/*
	 * La celda se estira hasta el mínimo, pero la imagen no la seguía y
	 * dejaba franjas de fondo arriba y abajo. Posicionada dentro de su
	 * contenedor, lo llena siempre.
	 */
	.dvdrrb-hero--con-imagen .dvdrrb-hero__media {
		align-self: stretch;
	}

	.dvdrrb-hero--con-imagen .dvdrrb-hero__media-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

/* --- Titular compuesto ---------------------------------------------- */

/*
 * «AVANZADO» + «ESCALA GRANDE», con «BUSTO Y 75MM» encima de la segunda
 * parte. Las dos partes se alinean por la línea base de su última línea,
 * no por el borde inferior de la caja: tienen tamaños distintos y por el
 * borde quedarían descolgadas. flex-end queda como respaldo para los
 * navegadores que no entienden «last baseline».
 */
.dvdrrb-hero__titulo--compuesto {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-items: last baseline;
	column-gap: 0.35em;
}

/*
 * La etiqueta va detrás del destacado en el marcado y la rejilla la sube.
 * Como la rejilla toma sus líneas base por el orden de las filas y no por
 * el del marcado, su última línea base es la del destacado, que es la que
 * tiene que casar con la primera parte.
 */
.dvdrrb-hero__titulo-extra {
	display: grid;
	grid-template-areas:
		"etiqueta"
		"destacado";
	justify-items: start;
}

.dvdrrb-hero__destacado {
	grid-area: destacado;
	font-size: 0.6em;
	line-height: 1;
}

.dvdrrb-hero__etiqueta {
	grid-area: etiqueta;
	margin-block-end: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--spartan);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dvdrrb-hero .dvdrrb-hero__destacado {
	color: var(--wp--preset--color--rojo);
}

.dvdrrb-hero .dvdrrb-hero__etiqueta {
	color: var(--wp--preset--color--blanco);
}

/* --- Formato banner de curso ----------------------------------------- */

/*
 * Banda a todo el ancho, como la cabecera estándar, pero con la imagen
 * contenida en el ancho del contenido (1240px) y centrada: el banner está
 * diseñado a esa medida, y estirado a 1920px mediría casi 800px de alto.
 * Lo que sobra a los lados es el mismo negro de la imagen, así que la banda
 * se ve continua de borde a borde.
 *
 * El texto se alinea con el contenido de la página (el relleno lateral de
 * .dvdrrb-hero__inner) y ocupa como mucho la mitad del contenedor, que es
 * donde empieza la figura en todos los banners.
 *
 * El negro es el de los banners (#080A0B), que no coincide con ninguno de
 * los dos de la marca: con otro se vería dónde acaba la imagen. Se declara
 * aquí y no en la hoja base porque solo lo usa este formato.
 */
.dvdrrb-hero--banner {
	--dvdrrb-negro-banner: #080a0b;
}

.dvdrrb-hero.dvdrrb-hero--banner {
	background-color: var(--dvdrrb-negro-banner);
	/*
	 * Contenedor de consulta: los tamaños del texto se calculan sobre el
	 * ancho de la banda (cqi). Una palabra larga como «FUNDAMENTALS» no
	 * puede partirse: si el titular no encoge con la banda, a 900px se
	 * mete encima de la figura.
	 */
	container-type: inline-size;
}

.dvdrrb-hero--banner.dvdrrb-hero--con-imagen > .dvdrrb-hero__media {
	justify-self: center;
	width: min(var(--dvdrrb-ancho), 100%);
}

/*
 * Cuando la banda es más ancha que la imagen, sus bordes izquierdo y
 * derecho quedan a la vista. Aunque el negro sea el mismo, la compresión
 * del JPG o del WebP lo desplaza un punto arriba o abajo y en algunas
 * pantallas se ve la costura. Un fundido de 3rem en cada lado la borra sea
 * cual sea la imagen. 77.5rem es --dvdrrb-ancho: las consultas de medios
 * no admiten variables.
 */
@media (min-width: 77.5rem) {

	.dvdrrb-hero--banner.dvdrrb-hero--con-imagen .dvdrrb-hero__media-img {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	}

}

.dvdrrb-hero--banner .dvdrrb-hero__inner {
	padding-block: var(--wp--preset--spacing--40);
}

.dvdrrb-hero--banner .dvdrrb-hero__contenido {
	max-width: min(34rem, 50%);
}

.dvdrrb-hero--banner .dvdrrb-hero__antetitulo {
	font-family: var(--wp--preset--font-family--spartan);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.17em;
}

.dvdrrb-hero--banner .dvdrrb-hero__titulo {
	font-size: clamp(1.75rem, 1.125rem + 1.5vw, 2.5rem);
	font-size: clamp(1.75rem, 3.2cqi, 2.5rem);
	line-height: 1;
	text-transform: uppercase;
}

.dvdrrb-hero--banner .dvdrrb-hero__titulo + .dvdrrb-hero__texto {
	margin-block-start: var(--wp--preset--spacing--20);
}

.dvdrrb-hero--banner .dvdrrb-hero__texto {
	font-size: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
	font-size: clamp(1rem, 1.9cqi, 1.5rem);
	line-height: 1.3;
}

/* El editor visual devuelve párrafos y Astra les da margen inferior. */
.dvdrrb-hero--banner .dvdrrb-hero__texto p {
	margin: 0;
}

/*
 * En móvil la banda no da para texto y figura a la vez: la imagen pasa
 * arriba, recortada por el lado de la figura (el «Encuadre en móvil», a la
 * derecha por defecto en este formato), y el texto debajo sobre el negro.
 * Tres clases para ganar a las reglas móviles de la imagen de fondo.
 */
@media (max-width: 47.9375rem) {

	.dvdrrb-hero.dvdrrb-hero--banner.dvdrrb-hero--con-imagen {
		grid-template-areas:
			"media"
			"contenido";
		min-height: 0;
	}

	.dvdrrb-hero--banner.dvdrrb-hero--con-imagen > .dvdrrb-hero__media {
		grid-area: media;
		align-self: start;
		aspect-ratio: 4 / 3;
	}

	.dvdrrb-hero--banner.dvdrrb-hero--con-imagen > .dvdrrb-hero__inner {
		grid-area: contenido;
	}

	.dvdrrb-hero.dvdrrb-hero--banner .dvdrrb-hero__inner {
		padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.dvdrrb-hero.dvdrrb-hero--banner .dvdrrb-hero__contenido {
		max-width: 100%;
	}

	/* Apilado, el texto ocupa todo el ancho: la proporción cambia. */
	.dvdrrb-hero.dvdrrb-hero--banner .dvdrrb-hero__titulo {
		font-size: clamp(1.75rem, 8.5cqi, 2.5rem);
	}

	.dvdrrb-hero.dvdrrb-hero--banner .dvdrrb-hero__texto {
		font-size: clamp(1rem, 5cqi, 1.25rem);
	}

}

/* --- Aviso de bloque vacío (solo se ve en el editor) ----------------- */

.dvdrrb-hero__placeholder {
	padding: var(--wp--preset--spacing--40);
	border: 0.125rem dashed var(--wp--preset--color--gris);
	border-radius: 0.25rem;
	background-color: var(--wp--preset--color--gris);
	color: var(--wp--preset--color--negro);
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}