/* =========================================================
   SEMINARIOS
   Estilos propios del template page-seminarios.php
   ========================================================= */

/* Slider de posts (FlexSlider carousel, 4 visibles en desktop).
   Margen lateral: estrecha el slider (items un poco más pequeños) y deja
   hueco a ambos lados para las flechas "+", que van fuera del slider pero
   dentro del layout de la web. */
.seminarios-slider.flexslider {
	margin: 0 48px 2rem;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* IMPORTANTE: el tema fuerza globalmente (style.css):
     .flexslider .slides        { display: flex }
     .flexslider .slides > li   { display: flex !important }
   y las clases col-* añaden max-width:33.33%. Eso rompe el carousel:
   cada slide crece a 1/3 del track y la imagen se desborda a pantalla completa.
   Restauramos la maquetación que FlexSlider espera (bloque + <li> flotado con
   el ancho inline que pone el plugin). Selectores con .flexslider para ganar
   en especificidad a las reglas globales. */
.seminarios-slider.flexslider .slides {
	display: block !important;
}

.seminarios-slider.flexslider .slides > li {
	display: block !important;
	float: left;
	max-width: none !important;
	margin-right: 0;
}

/* Flechas de navegación (los "+" del tema) FUERA del slider, en los huecos
   laterales creados por el margin del slider (dentro del layout). */
.seminarios-slider.flexslider .flex-direction-nav a {
	width: 26px;
	height: 26px;
	margin-top: -13px;
}
.seminarios-slider.flexslider .flex-direction-nav .flex-prev {
	left: -38px;
}
.seminarios-slider .caja .categorias{
	display: none;
}
.seminarios-slider.flexslider .flex-direction-nav .flex-next {
	right: -38px;
}
/* prev deshabilitado (inicio) se mantiene oculto vía .flex-disabled del tema */
.seminarios-slider.flexslider .flex-direction-nav .flex-next,
.seminarios-slider.flexslider .flex-direction-nav .flex-prev:not(.flex-disabled) {
	opacity: 1;
}

/* Reserva la altura de la miniatura (curso-thumb 474x267) desde el inicio:
   evita reflow/recortes al cargar la imagen y que FlexSlider mida mal. */
.seminarios-slider .articulo-thumb {
	aspect-ratio: 474 / 267;
	overflow: hidden;
}
.seminarios-slider .articulo-thumb > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Anti-FOUC: ocultar las diapositivas en crudo hasta que FlexSlider las
   componga (crea .flex-viewport al inicializar). Así no se ve el layout roto. */
.seminarios-slider .slides {
	opacity: 0;
}
.seminarios-slider.flexslider .flex-viewport .slides {
	opacity: 1;
	transition: opacity .2s ease;
}
.seminarios-slider .caja-articulo-inicio .articulo-container .articulo-thumb>img{
	    mix-blend-mode: normal;
}
/* Fecha anclada a 4px del fondo de la tarjeta (todas alineadas abajo).
   Reservamos espacio inferior para que no se solape con el texto en la card
   más alta. Usamos .articulo-container en el selector para ganar en
   especificidad a la regla del tema (.caja-articulo .articulo-container ...). */
.seminarios-slider .articulo-container .articulo-content {
	padding-bottom: 2.6rem;
}
.seminarios-slider .articulo-container .articulo-fecha {
	position: absolute;
	left: 2rem;
	bottom: 4px;
	margin: 0;
	padding: 0;
	display:none;
}

/* =========================================================
   GRID DE VÍDEOS DE YOUTUBE (4 columnas)
   ========================================================= */
.seminarios-videos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
	margin: 1.5rem 0 2rem;
}

/* Miniatura con botón de play (16:9) */
.seminarios-videos .seminario-video-thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.seminarios-videos .seminario-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.seminarios-videos .seminario-video-thumb:hover img {
	transform: scale(1.05);
}
.seminarios-videos .seminario-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	transform: translate(-50%, -50%);
	background: rgba(59, 60, 60, 0.85);
	border-radius: 50%;
	transition: background .2s ease;
	opacity: 0.4;
}
.seminarios-videos .seminario-video-play:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}
.seminarios-videos .seminario-video-thumb:hover .seminario-video-play {
	background: #76d8ca;
}

/* Iframe que sustituye a la miniatura al reproducir */
.seminarios-videos .seminario-video-iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

.seminarios-videos .seminario-video-title {
	margin: 0.6rem 0 0;
	font-size: 15px;
	line-height: 1.3;
	font-family: 'DINPro-Bold';

}
.titulo_principal_seminarios{
	margin-top: 94px;
}



/* Fecha del seminario (ACF), encima del título del item del slider.
   Misma tipografía y tamaño que .articulo-title (DINPro-Black, 22px, mayúsculas). */
.seminarios-slider .articulo-content hgroup .articulo-fecha-seminario {
	margin-bottom: 15px;
	font-family: 'DINPro-Black';
	font-size: 22px;
	line-height: 1;
	text-transform: uppercase;
}
@media (max-width: 991px) {
	.seminarios-slider .articulo-content hgroup .articulo-fecha-seminario { font-size: 20px; }
}

/* Responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width: 991px) {
	.seminarios-videos { grid-template-columns: repeat(1, 1fr); }
}
@media (max-width: 575px) {
	.seminarios-videos { grid-template-columns: 1fr; }
}