/**
 * Samaruc Joyas — portada editable.
 *
 * Estilos de los bloques que el cliente controla desde el Personalizador
 * (panel «Portada»). Reproducen el aspecto que tenía la portada con
 * MetaSlider + Elementor, pero sin depender de ninguno de los dos.
 *
 * La rejilla de categorías conserva su CSS de siempre en style.css
 * (.ssj-cat-grid / .ssj-cat-card): aquí solo se añade el nº de columnas
 * en móvil, que antes estaba fijo.
 */

/* Bloque apagado desde el Personalizador: sigue en el DOM (para que la vista
   previa lo pueda repintar) pero no ocupa nada. */
.sj-bloque--oculto {
	display: none !important;
}

/* =========================================================================
   Fotos con punto focal
   ====================================================================== */

.sj-foto {
	display: block;
	width: 100%;
	height: 100%;
}

.sj-foto__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El punto focal viaja en estas variables desde el Personalizador. */
	object-position: var(--fx, 50%) var(--fy, 50%);
}

@media (max-width: 1024px) {
	.sj-foto__img {
		object-position: var(--fx-t, var(--fx, 50%)) var(--fy-t, var(--fy, 50%));
	}
}

@media (max-width: 600px) {
	.sj-foto__img {
		object-position: var(--fx-m, var(--fx, 50%)) var(--fy-m, var(--fy, 50%));
	}
}

/* En el bloque «Foto y texto» la foto manda su propia altura. */
.sj-foto--bloque .sj-foto__img {
	height: auto;
}

/* =========================================================================
   1 · Banner principal
   ====================================================================== */

.sj-banner {
	position: relative;
	overflow: hidden;
	width: 100%;
	line-height: normal;
	font-size: initial;
	background: #1d2327;
}

.sj-banner__pista {
	position: relative;
	width: 100%;
	/* Altura: «normal» = la proporción 1200×500 del diseño original. */
	aspect-ratio: 2.4;
}

.sj-banner--alto-alta .sj-banner__pista {
	aspect-ratio: 1.6;
}

.sj-banner--alto-pantalla .sj-banner__pista {
	aspect-ratio: auto;
	height: calc(100vh - 80px);
	min-height: 420px;
}

.sj-banner__diapo {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.sj-banner__diapo.es-activa {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* Sin JavaScript (o mientras carga) al menos se ve la primera. */
.sj-banner__diapo:first-child {
	opacity: 1;
	visibility: visible;
}

.sj-banner__diapo.es-activa:first-child {
	z-index: 1;
}

.sj-banner__enlace,
.sj-banner__diapo > .sj-foto {
	position: absolute;
	inset: 0;
	display: block;
}

/* Velo oscuro: protege el texto sea cual sea la foto. Doble degradado
   (vertical + horizontal), igual que tenía el slider anterior, pero en
   variables para poder darle la vuelta según dónde se coloque el texto. */
.sj-banner__diapo {
	--velo-v: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0.40) 55%,
		rgba(0, 0, 0, 0.85) 100%);
	--velo-h: linear-gradient(270deg,
		rgba(0, 0, 0, 0.50) 0%,
		rgba(0, 0, 0, 0.20) 35%,
		rgba(0, 0, 0, 0) 65%);
}

.sj-banner__diapo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--velo-v), var(--velo-h);
}

/* --- Posición del texto sobre la foto (por diapositiva) ---
   El velo acompaña al texto: se oscurece la zona donde está. */

.sj-banner__diapo--v-arriba {
	--velo-v: linear-gradient(0deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0.40) 55%,
		rgba(0, 0, 0, 0.85) 100%);
}

.sj-banner__diapo--v-centro {
	--velo-v: linear-gradient(180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.40) 50%,
		rgba(0, 0, 0, 0.15) 100%);
}

.sj-banner__diapo--h-izquierda {
	--velo-h: linear-gradient(90deg,
		rgba(0, 0, 0, 0.50) 0%,
		rgba(0, 0, 0, 0.20) 35%,
		rgba(0, 0, 0, 0) 65%);
}

.sj-banner__diapo--h-centro {
	--velo-h: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.sj-banner__diapo--v-arriba .sj-banner__texto {
	align-items: flex-start;
}

.sj-banner__diapo--v-centro .sj-banner__texto {
	align-items: center;
}

.sj-banner__diapo--h-izquierda .sj-banner__texto {
	justify-content: flex-start;
}

.sj-banner__diapo--h-centro .sj-banner__texto {
	justify-content: center;
}

.sj-banner__diapo--h-izquierda .sj-banner__caja {
	text-align: left;
}

.sj-banner__diapo--h-centro .sj-banner__caja {
	text-align: center;
}

.sj-banner__texto {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	/* Sangría: el Personalizador manda el valor de escritorio (sin unidad) en
	   --sj-sangria; por debajo de 1440 de ancho se encoge en proporción.
	   Sin ajuste guardado, 64 reproduce el diseño original. */
	padding: min(calc(var(--sj-sangria, 64) * 1px), calc(var(--sj-sangria, 64) * 100vw / 1440));
	pointer-events: none; /* el clic sigue llegando a la foto/enlace */
}

.sj-banner__caja {
	max-width: 480px;
	color: #fff;
	text-align: right;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* --- Ancho de la caja de texto (para todo el banner) --- */

.sj-banner--ancho-estrecho .sj-banner__caja {
	max-width: 360px;
}

.sj-banner--ancho-ancho .sj-banner__caja {
	max-width: 660px;
}

/* --- Espaciado entre título, texto y botón (para todo el banner) --- */

.sj-banner--esp-compacto {
	--sj-esp: 0.55;
	--sj-interlinea: 1.4;
}

.sj-banner--esp-amplio {
	--sj-esp: 1.7;
	--sj-interlinea: 1.75;
}

.sj-banner__titulo {
	margin: 0 0 calc(0.65em * var(--sj-esp, 1));
	color: #fff;
	font-family: inherit;
	font-size: clamp(1.75rem, 4.2vw, 3rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.sj-banner__parrafo {
	margin: 0 0 calc(2.1em * var(--sj-esp, 1));
	color: #fff;
	font-size: clamp(0.95rem, 1.5vw, 1.1rem);
	font-weight: 400;
	line-height: var(--sj-interlinea, 1.55);
	opacity: 0.95;
}

.sj-banner__cta {
	display: inline-block;
	padding: 0.95em 2.2em;
	border: 2px solid #fff;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	color: #111;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	pointer-events: auto;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sj-banner__cta:hover,
.sj-banner__diapo:hover .sj-banner__cta {
	background: transparent;
	color: #fff;
	transform: translateY(-1px);
}

/* Puntos de navegación */
.sj-banner__puntos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.sj-banner__punto {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.sj-banner__punto:hover {
	background: rgba(255, 255, 255, 0.85);
}

.sj-banner__punto.es-activo {
	background: #fff;
	transform: scale(1.25);
}

.sj-banner a:focus,
.sj-banner button:focus {
	outline: none;
	box-shadow: none;
}

.sj-banner a:focus-visible,
.sj-banner button:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
}

/* --- Banner en tablet y móvil --- */

@media (max-width: 1024px) {
	.sj-banner__caja {
		max-width: 60%;
	}
}

@media (max-width: 600px) {

	/* Altura propia en móvil: la foto vertical luce y el texto cabe debajo. */
	.sj-banner--altomovil-normal .sj-banner__pista {
		aspect-ratio: 1.2;
	}

	.sj-banner--altomovil-alta .sj-banner__pista {
		aspect-ratio: 0.7;
	}

	.sj-banner--altomovil-pantalla .sj-banner__pista {
		aspect-ratio: auto;
		height: calc(100vh - 60px);
	}

	.sj-banner__diapo::after {
		background: linear-gradient(180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.10) 30%,
			rgba(0, 0, 0, 0.55) 60%,
			rgba(0, 0, 0, 0.90) 100%);
	}

	/* En el móvil la posición elegida no se aplica: el texto va siempre
	   centrado sobre el borde inferior, que es donde protege el velo.
	   (Los selectores llevan la diapositiva delante para ganar a las
	   clases de posición de arriba.) */
	.sj-banner__diapo .sj-banner__texto {
		align-items: flex-end;
		justify-content: center;
		padding: 28px 20px 60px;
	}

	.sj-banner__diapo .sj-banner__caja {
		max-width: 100%;
		text-align: center;
	}

	.sj-banner__parrafo {
		margin-bottom: calc(1.7em * var(--sj-esp, 1));
	}

	.sj-banner__puntos {
		bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sj-banner__diapo {
		transition: none;
	}
}

/* =========================================================================
   2 · Rejilla de categorías — columnas en móvil (antes fijas en el CSS)
   ====================================================================== */

@media (max-width: 600px) {
	.sj-bloque--categorias.cols-movil-1 .ssj-cat-card {
		flex-basis: 100%;
		max-width: 100%;
	}
	.sj-bloque--categorias.cols-movil-2 .ssj-cat-card {
		flex-basis: 50%;
		max-width: 50%;
	}
}

/* =========================================================================
   4 · Foto y texto — permitir invertir el orden desde el Personalizador
   ====================================================================== */

.sj-foto-texto--derecha > .e-con-inner {
	flex-direction: row-reverse;
}

@media (max-width: 767px) {
	.sj-foto-texto--derecha > .e-con-inner {
		flex-direction: column;
	}
}

/* =====================================================================
   Arreglo móvil (agosto 2026): los contenedores e-con congelados de
   Elementor pasan a flex-wrap:wrap en ≤767px y Chromium calcula altura 0
   para los descendientes cuya altura nace de un aspect-ratio. Resultado:
   el bloque del banner medía 0 y el grid de categorías se pintaba encima.
   Altura explícita en vw equivalente a cada proporción (el aspect-ratio
   se mantiene como documentación; con height definida no interviene).
   ===================================================================== */
@media (max-width: 767px) {
	.sj-banner__pista {
		height: calc(100vw / 2.4);
	}
	.sj-banner--alto-alta .sj-banner__pista {
		height: calc(100vw / 1.6);
	}
	.sj-banner--alto-pantalla .sj-banner__pista {
		height: calc(100vh - 80px);
	}
}

@media (max-width: 600px) {
	.sj-banner--altomovil-normal .sj-banner__pista {
		height: calc(100vw / 1.2);
	}
	.sj-banner--altomovil-alta .sj-banner__pista {
		height: calc(100vw / 0.7);
	}
	.sj-banner--altomovil-pantalla .sj-banner__pista {
		height: calc(100vh - 60px);
	}
}