/* ── Artea Hero Slider — Frontend ─────────────────────────────────────────── */

/* Contenedor principal */
.artea-hero-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0; /* evitar gap debajo del slider */
}

/* Swiper */
.artea-hero-swiper {
	width: 100%;
	height: 90vh;
	min-height: 460px;
	max-height: 820px;
}

/* ── Slide ────────────────────────────────────────────────────────────────── */
.artea-hero-slide {
	position: relative;
	overflow: hidden;
}

/* Imagen de fondo — reserva 10% extra para que el Kenburns no muestre bordes */
.artea-hero-bg {
	position: absolute;
	inset: -6%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	will-change: transform;
}

.artea-hero-bg-fallback {
	background-color: #1a1714;
}

/* ── Kenburns ──────────────────────────────────────────────────────────────
   Tres variantes de movimiento — se aplican en ciclo por :nth-child
   para que slides consecutivos no repitan la misma dirección.
────────────────────────────────────────────────────────────────────────── */
@keyframes artea-kb-a {
	from { transform: scale(1.00) translate( 0%,  0%); }
	to   { transform: scale(1.10) translate(-2%, -1%); }
}
@keyframes artea-kb-b {
	from { transform: scale(1.10) translate( 0%,  0%); }
	to   { transform: scale(1.00) translate( 2%,  1%); }
}
@keyframes artea-kb-c {
	from { transform: scale(1.00) translate( 1%,  0%); }
	to   { transform: scale(1.10) translate(-1%,  2%); }
}

.artea-hero-slide.swiper-slide-active .artea-hero-bg {
	animation: artea-kb-a 9s ease-out forwards;
}
.artea-hero-slide.swiper-slide-active:nth-child(3n+2) .artea-hero-bg {
	animation: artea-kb-b 9s ease-out forwards;
}
.artea-hero-slide.swiper-slide-active:nth-child(3n+3) .artea-hero-bg {
	animation: artea-kb-c 9s ease-out forwards;
}

/* Overlay oscuro — gradiente lateral para legibilidad del texto */
.artea-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.58) 0%,
		rgba(0, 0, 0, 0.32) 55%,
		rgba(0, 0, 0, 0.08) 100%
	);
	z-index: 1;
}

/* ── Contenido del slide ─────────────────────────────────────────────────── */
.artea-hero-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding-bottom: 80px;
	line-height: 1.5;
}

.artea-hero-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 48px;
}

/* Título — usa Stentiga (la fuente custom ya activa en el sitio) */
.artea-hero-title {
	font-family: 'stentiga', 'Playfair Display', Georgia, serif;
	font-size: clamp(30px, 5.5vw, 68px);
	font-weight: 400;
	color: #ffffff;
	line-height: 1.08;
	margin: 0 0 16px;
	max-width: 14ch;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/* Subtítulo */
.artea-hero-subtitle {
	font-size: clamp(13px, 1.4vw, 17px);
	color: rgba(255, 255, 255, 0.88);
	max-width: 44ch;
	margin: 0 0 30px;
	line-height: 1.55;
	font-weight: 400;
}

/* Botón — estilo del mockup: negro, sin border-radius */
.artea-hero-btn {
	display: inline-block;
	background: #111111;
	color: #ffffff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 34px;
	border: 2px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}
.artea-hero-btn:hover {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

/* ── Paginación (bullets alargados) ─────────────────────────────────────── */
.artea-hero-pagination {
	position: absolute !important;
	bottom: 30px !important;
	left: 0;
	right: 0;
	text-align: left;
	padding-left: 48px !important;
	z-index: 10;
}

.artea-hero-pagination .swiper-pagination-bullet {
	width: 28px;
	height: 3px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.45);
	opacity: 1;
	margin: 0 4px !important;
	transition: background 0.3s, width 0.3s;
}

.artea-hero-pagination .swiper-pagination-bullet-active {
	background: #ffffff;
	width: 52px;
}

/* ── Flechas de navegación ───────────────────────────────────────────────── */
.artea-hero-arrow {
	--swiper-navigation-size: 20px;
	color: rgba(255, 255, 255, 0.85) !important;
	transition: color 0.2s;
}
.artea-hero-arrow:hover { color: #fff !important; }
.artea-hero-arrow::after { font-size: 20px !important; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.artea-hero-swiper {
		height: 80vw;
		max-height: 560px;
		min-height: 320px;
	}
	.artea-hero-inner { padding: 0 20px; }
	.artea-hero-content { padding-bottom: 52px; }
	.artea-hero-pagination { padding-left: 20px !important; bottom: 20px !important; }
	.artea-hero-prev,
	.artea-hero-next { display: none !important; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.artea-hero-bg { animation: none !important; }
}