/* ==========================================================
   Slider Destacadas — variables para personalizar rápido
   ========================================================== */
.sd-slider {
	--sd-aspect-ratio: 1473 / 389;   /* misma proporción que 1473x389px, se mantiene en cualquier ancho */
	--sd-altura-maxima: 520px;       /* techo para pantallas muy anchas: a ~1855px de ancho ya da ~490px de alto */
	--sd-offset-superior: 150px;     /* ⚠️ AJUSTAR: alto real del menú del sitio en desktop (ver nota abajo) */
	--sd-fondo-imagen: #111111;      /* color detrás de la imagen cuando no llena todo el recuadro */
	--sd-color-flecha: rgba(0, 0, 0, 0.45);
	--sd-color-flecha-hover: rgba(0, 0, 0, 0.75);
	--sd-color-punto: rgba(255, 255, 255, 0.55);
	--sd-color-punto-activo: #ffffff;
	--sd-color-caption-fondo: rgba(0, 0, 0, 0.72);
	--sd-color-boton: #009e9f;          /* fondo del botón (se pisa desde Ajustes, el shortcode o cada entrada) */
	--sd-color-boton-texto: #1a1a1a;    /* el plugin lo elige solo (blanco u oscuro) según el color de fondo */
	--sd-radio-boton: 6px;
	--sd-transicion: 0.5s ease-in-out;
	--sd-radio: 8px;

	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--sd-radio);
	outline: none;
	margin-top: var(--sd-offset-superior);
	scroll-margin-top: var(--sd-offset-superior);
}

.sd-slider-track {
	display: flex;
	align-items: stretch;
	transition: transform var(--sd-transicion);
}

.sd-slide {
	min-width: 100%;
	position: relative;
	aspect-ratio: var(--sd-aspect-ratio);
	max-height: var(--sd-altura-maxima);
	background: var(--sd-fondo-imagen);
}

.sd-slide a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.sd-slide img,
.sd-slide-noimg {
	width: 100%;
	height: 100%;
	/* "contain" en vez de "cover": la imagen entera siempre queda visible,
	   nunca se recorta. Si su proporción no llena el recuadro, se ven franjas
	   del color de --sd-fondo-imagen a los costados o arriba/abajo. */
	object-fit: contain;
	display: block;
	background: var(--sd-fondo-imagen);
}

.sd-slide-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 18px 60px 18px 22px;
	background: linear-gradient(to top, var(--sd-color-caption-fondo), transparent);
	box-sizing: border-box;
}

.sd-slide-caption h3 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #fff;
}

/* Título como botón (modo "boton"): abajo a la izquierda, por encima de los
   puntos. Es un <span> y no un <button> porque toda la diapositiva ya es un
   enlace y no se pueden anidar elementos interactivos. */
.sd-slide-boton {
	position: absolute;
	left: 22px;
	bottom: 40px;
	max-width: calc(100% - 110px);
	padding: 10px 20px;
	box-sizing: border-box;
	background: var(--sd-color-boton);
	color: var(--sd-color-boton-texto);
	border-radius: var(--sd-radio-boton);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	/* si el título es larguísimo, se corta a 2 líneas con "…" */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: filter 0.2s ease;
}

.sd-slide a:hover .sd-slide-boton,
.sd-slide a:focus-visible .sd-slide-boton {
	filter: brightness(0.88); /* oscurece un poco el color que se haya elegido */
}

/* Flechas */
.sd-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--sd-color-flecha);
	color: #fff;
	border: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background 0.2s ease;
	padding: 0;
}

.sd-arrow:hover {
	background: var(--sd-color-flecha-hover);
}

.sd-arrow-prev {
	left: 15px;
}

.sd-arrow-next {
	right: 15px;
}

/* Puntos */
.sd-dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 5;
}

.sd-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sd-color-punto);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sd-dot.is-active {
	background: var(--sd-color-punto-activo);
	transform: scale(1.15);
}

/* Responsive: en pantallas chicas la proporción 1473:389 queda demasiado
   angosta, así que acá pasamos a un recuadro más alto en relación al ancho.
   También sacamos el offset superior: en mobile/tablet el menú no tapa
   el slider, así que no hace falta reservarle margen. */
@media (max-width: 768px) {
	.sd-slider {
		--sd-aspect-ratio: 16 / 9;     /* menos panorámica que en desktop */
		--sd-offset-superior: 0px;     /* en tablet el menú no tapa el slider, no hace falta margen */
	}
	.sd-slide-caption h3 {
		font-size: 1.05rem;
	}
	.sd-slide-boton {
		font-size: 0.9rem;
		padding: 8px 16px;
	}
	.sd-arrow {
		width: 34px;
		height: 34px;
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.sd-slider {
		--sd-aspect-ratio: 4 / 3;      /* bien alta, para que no se vea "achatada" en el celular */
		--sd-offset-superior: 0px;     /* en celular el menú no tapa el slider, no hace falta margen */
	}
	.sd-slide-caption {
		padding: 12px 45px 12px 14px;
	}
	.sd-slide-boton {
		left: 14px;
		bottom: 34px;
		max-width: calc(100% - 28px);
		font-size: 0.85rem;
		padding: 7px 14px;
	}
	.sd-arrow-prev {
		left: 8px;
	}
	.sd-arrow-next {
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-slider-track {
		transition: none;
	}
}