/* Hara Slider — portada de centrohara.es
   Alto fijo 460 px (variable --hara-slider-alto por si dirección lo cambia).
   Sin dependencias: ni jQuery, ni librerías de carrusel. */

.hara-slider {
	--hara-slider-alto: 460px;
	position: relative;
	width: 100%;
	height: var(--hara-slider-alto);
	overflow: hidden;
	background: #241c2b;
	isolation: isolate;
}

.hara-slider__pista {
	position: relative;
	width: 100%;
	height: 100%;
}

.hara-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease;
	will-change: opacity;
}

.hara-slide.es-activa {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.hara-slide__foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: scale(1.04);
	transition: transform 9s ease-out;
}

.hara-slide.es-activa .hara-slide__foto {
	transform: scale(1);
}

/* Velo: degradado hacia el lado del texto, para que se lea siempre. */
.hara-slide__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #1b1420 0%, rgba(27, 20, 32, .92) 34%, rgba(27, 20, 32, .45) 68%, rgba(27, 20, 32, .05) 100%);
}

.hara-slide--centro .hara-slide__velo {
	background: linear-gradient(180deg, rgba(27, 20, 32, .45) 0%, rgba(27, 20, 32, .88) 100%);
}

.hara-slide--derecha .hara-slide__velo {
	background: linear-gradient(270deg, #1b1420 0%, rgba(27, 20, 32, .92) 34%, rgba(27, 20, 32, .45) 68%, rgba(27, 20, 32, .05) 100%);
}

.hara-slide__contenido {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hara-slide__caja {
	max-width: 620px;
	color: #fff;
}

.hara-slide--centro .hara-slide__contenido {
	align-items: center;
	text-align: center;
}

.hara-slide--derecha .hara-slide__contenido {
	align-items: flex-end;
	text-align: right;
}

.hara-slide__titulo {
	margin: 0 0 14px;
	font-family: var(--hara-display, Georgia, "Times New Roman", serif);
	font-size: clamp(32px, 4.2vw, 50px);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -.022em;
	color: #fff;
	text-wrap: balance;
	/* Halo suave: el texto se lee aunque la foto tenga zonas claras. */
	text-shadow: 0 2px 26px rgba(18, 12, 22, .6);
}

.hara-slide__texto {
	margin: 0;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .92);
	max-width: 52ch;
	text-wrap: pretty;
	text-shadow: 0 2px 20px rgba(18, 12, 22, .65);
}

.hara-slide--centro .hara-slide__texto {
	margin-inline: auto;
}

.hara-slide--derecha .hara-slide__texto {
	margin-inline-start: auto;
}

.hara-slide__boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 13px 26px;
	border-radius: 999px;
	background: #fff;
	color: #2b1f33;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.hara-slide__boton:hover,
.hara-slide__boton:focus-visible {
	background: #a83ccc;
	color: #fff;
	transform: translateY(-2px);
}

/* --- Controles --- */

.hara-slider__flecha {
	position: absolute;
	top: 50%;
	z-index: 5;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(27, 20, 32, .28);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background-color .2s ease, border-color .2s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hara-slider:hover .hara-slider__flecha,
.hara-slider:focus-within .hara-slider__flecha {
	opacity: 1;
}

.hara-slider__flecha:hover {
	background: rgba(168, 60, 204, .85);
	border-color: transparent;
}

.hara-slider__flecha svg {
	width: 20px;
	height: 20px;
}

.hara-slider__flecha--prev { left: 18px; }
.hara-slider__flecha--next { right: 18px; }

.hara-slider__puntos {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	gap: 9px;
}

.hara-slider__punto {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.hara-slider__punto.es-activo {
	width: 26px;
	border-radius: 999px;
	background: #fff;
}

.hara-slider__flecha:focus-visible,
.hara-slider__punto:focus-visible,
.hara-slide__boton:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* --- Responsive: el alto se respeta; el texto se ajusta --- */

@media (max-width: 780px) {
	.hara-slide__velo {
		background: linear-gradient(180deg, rgba(27, 20, 32, .35) 0%, rgba(27, 20, 32, .8) 100%);
	}

	.hara-slide__contenido {
		padding: 0 20px;
		justify-content: flex-end;
		padding-bottom: 58px;
	}

	.hara-slide--derecha .hara-slide__contenido,
	.hara-slide--centro .hara-slide__contenido {
		align-items: flex-start;
		text-align: left;
	}

	.hara-slide--centro .hara-slide__texto,
	.hara-slide--derecha .hara-slide__texto {
		margin-inline: 0;
	}

	.hara-slider__flecha { display: none; }
	.hara-slider__puntos { left: 20px; transform: none; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.hara-slide,
	.hara-slide__foto,
	.hara-slide__boton {
		transition: none;
	}

	.hara-slide.es-activa .hara-slide__foto {
		transform: none;
	}
}