/**
 * Tarjetas de cursos.
 * Versión 1.6.0 — 20/08/2026
 *
 * 1.6.0  Proporciones limpias (3/4 y 1/1) y medidas en la retícula, en
 *        lugar de los números sacados del archivo de diseño.
 *
 * 1.5.0  En móvil, icono y texto del modal alineados al inicio.
 *
 * 1.4.0  En móvil las dos opciones del modal ocupan el mismo ancho.
 *
 * 1.3.0  El modal pasa al ancho del contenedor para cubrir las tarjetas.
 *        Iconos a 128px: el lienzo de los SVG se recortó al dibujo, que
 *        solo ocupaba el 40% del original.
 *
 * 1.2.0  Iconos de modalidad dentro de las opciones del modal.
 *
 * 1.1.0  Modal de modalidad. La flecha pasa a círculo gris relleno, como
 *        en el diseño.
 *
 * 1.0.2  Radio de esquina a 8px, declarado también en la imagen y el
 *        degradado para que arriba y abajo sean idénticos. Modalidades en
 *        negrita y a 13px. Reinicio de la lista con más especificidad.
 *
 * 1.0.1  Los colores de texto se declaran con la clase del bloque delante:
 *        Astra colorea los encabezados del contenido con más especificidad
 *        y se llevaba por delante el rojo del nombre.
 *
 * Medidas del diseño: tarjetas de 394 × 520px (proporción 3:4) con 24px
 * de separación, tres por fila a 1240px de contenedor.
 */

.dvdrrb-cursos__inner {
	box-sizing: border-box;
	width: 100%;
	padding-inline: max(var(--dvdrrb-margen), (100% - var(--dvdrrb-ancho)) / 2);
}

/* --- Cabecera de la sección ------------------------------------------ */

.dvdrrb-cursos__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.dvdrrb-cursos__titulo {
	margin: 0;
}

.dvdrrb-cursos .dvdrrb-cursos__flecha {
	color: var(--wp--preset--color--negro);
}

.dvdrrb-cursos__flecha {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gris);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dvdrrb-cursos .dvdrrb-cursos__flecha:hover,
.dvdrrb-cursos .dvdrrb-cursos__flecha:focus-visible {
	background-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

.dvdrrb-cursos__flecha-icono {
	width: 1.25rem;
	height: 1.25rem;
}

/* --- Rejilla ---------------------------------------------------------- */

.dvdrrb-cursos .dvdrrb-cursos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dvdrrb-cursos .dvdrrb-cursos__item {
	margin: 0;
}

.dvdrrb-cursos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dvdrrb-cursos__item {
	margin: 0;
}

/* --- Tarjeta ---------------------------------------------------------- */

.dvdrrb-cursos__tarjeta {
	position: relative; /* Ancla del enlace extendido. */
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--negro);
	isolation: isolate;
}

.dvdrrb-cursos__imagen {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	border-radius: inherit;
}

.dvdrrb-cursos__imagen-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Degradado inferior para que el texto se lea sobre cualquier imagen. */
.dvdrrb-cursos__tarjeta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: linear-gradient(to top, rgb(0 0 0 / 85%) 0%, rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 0%) 75%);
	transition: opacity 0.3s ease;
}

.dvdrrb-cursos__contenido {
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.dvdrrb-cursos .dvdrrb-cursos__nombre {
	color: var(--wp--preset--color--rojo);
}

.dvdrrb-cursos .dvdrrb-cursos__modalidades {
	color: var(--wp--preset--color--blanco);
	font-weight: 700;
}

.dvdrrb-cursos__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dvdrrb-cursos__modalidades {
	margin-block-start: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --- Botón y enlace extendido ---------------------------------------- */

.dvdrrb-cursos__boton {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--30);
	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, color 0.2s ease;
}

/*
 * Enlace extendido: el enlace real sigue siendo el botón, con su texto y su
 * foco, pero esta capa invisible cubre la tarjeta entera para que se pueda
 * pulsar en cualquier punto. Evita envolver todo en un <a>, que obligaría a
 * un lector de pantalla a leer la tarjeta completa como un solo enlace.
 */
.dvdrrb-cursos__boton::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Estados --------------------------------------------------------- */

.dvdrrb-cursos__tarjeta:hover .dvdrrb-cursos__imagen-img,
.dvdrrb-cursos__tarjeta:has(.dvdrrb-cursos__boton:focus-visible) .dvdrrb-cursos__imagen-img {
	transform: scale(1.06);
}

.dvdrrb-cursos__tarjeta:hover::after,
.dvdrrb-cursos__tarjeta:has(.dvdrrb-cursos__boton:focus-visible)::after {
	opacity: 0.75;
}

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

/* El foco se dibuja sobre la tarjeta, no sobre el botón, porque el área
   pulsable es toda ella. */
.dvdrrb-cursos__tarjeta:has(.dvdrrb-cursos__boton:focus-visible) {
	outline: 0.125rem solid var(--wp--preset--color--rojo);
	outline-offset: 0.25rem;
}

/* --- Espaciado vertical ---------------------------------------------- */

.dvdrrb-cursos.dvdrrb-cursos--espaciado-compacto {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.dvdrrb-cursos.dvdrrb-cursos--espaciado-pegado {
	padding-block-end: 0;
}

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

@media (max-width: 47.9375rem) {

	.dvdrrb-cursos__cabecera {
		margin-block-end: var(--wp--preset--spacing--40);
	}

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

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

.dvdrrb-cursos__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;
}


/* =========================================================================
   MODAL DE MODALIDAD
   =========================================================================

   Medidas del diseño: panel rojo de 1169 × 636px con esquinas de 28px,
   titular blanco a 40px y dos opciones cuadradas de 333 × 330px con borde
   blanco de 2px y esquinas de 24px.
   ========================================================================= */

.dvdrrb-modal {
	width: min(var(--dvdrrb-ancho), calc(100% - var(--dvdrrb-margen) * 2));
	padding: 0;
	border: 0;
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

.dvdrrb-modal::backdrop {
	background-color: rgb(0 0 0 / 70%);
}

.dvdrrb-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	min-height: min(80vh, 40rem);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.dvdrrb-modal__cerrar {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
}

.dvdrrb-modal__cerrar svg {
	width: 1.5rem;
	height: 1.5rem;
}

.dvdrrb-modal__cerrar:hover,
.dvdrrb-modal__cerrar:focus-visible {
	background-color: rgb(255 255 255 / 20%);
}

.dvdrrb-modal .dvdrrb-modal__titulo {
	margin: 0;
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--spartan);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
}

.dvdrrb-modal .dvdrrb-modal__opciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dvdrrb-modal__opcion {
	/*
	 * Sin base flexible: en dirección columna se aplicaría a la altura y en
	 * móvil dejaba huecos enormes. La medida la lleva el enlace y la celda
	 * se ajusta a él.
	 */
	margin: 0;
	max-width: 100%;
}

.dvdrrb-modal .dvdrrb-modal__enlace {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	/*
	 * Medida fija: con un porcentaje se calculaba sobre un <li> que se
	 * ajustaba a su texto, y «PRESENCIAL» es más largo que «ONLINE», así
	 * que salían cuadrados de distinto tamaño.
	 */
	width: 18rem;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	padding: var(--wp--preset--spacing--30);
	border: 0.125rem solid var(--wp--preset--color--blanco);
	border-radius: 1.5rem;
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dvdrrb-modal .dvdrrb-modal__enlace:hover,
.dvdrrb-modal .dvdrrb-modal__enlace:focus-visible {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--rojo);
}

@media (max-width: 47.9375rem) {

	.dvdrrb-modal__panel {
		gap: var(--wp--preset--spacing--40);
		min-height: 0;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}

	.dvdrrb-modal .dvdrrb-modal__enlace {
		width: 100%;
		aspect-ratio: 3 / 1;
	}
}

/* El icono hereda el color del enlace con currentColor, así que al invertirse
   el fondo en hover y foco cambia solo. */
.dvdrrb-modal__icono {
	width: clamp(4.5rem, 9vw, 8rem);
	height: clamp(4.5rem, 9vw, 8rem);
}

@media (max-width: 47.9375rem) {

	/* En columna y estirados, para que ambos midan lo mismo. */
	.dvdrrb-modal .dvdrrb-modal__opciones {
		flex-direction: column;
		align-items: stretch;
	}

	.dvdrrb-modal__opcion {
		width: 100%;
	}

	.dvdrrb-modal .dvdrrb-modal__enlace {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
		text-align: start;
	}

	/* Ancho fijo para que las etiquetas arranquen en la misma vertical
	   aunque los iconos tengan proporciones distintas. */
	.dvdrrb-modal__icono {
		flex-shrink: 0;
		width: 3.5rem;
		height: 3.5rem;
	}

	.dvdrrb-modal__icono {
		width: 3rem;
		height: 3rem;
	}
}