/* ID1 Hero Slider — estilos de front-end.
   Las variables --id1-hero-* las inyecta el shortcode desde los ajustes; aquí
   solo se consumen. Desde la 1.4.0 hay un único breakpoint (móvil, 689.98px),
   alineado con el de Blocksy. Es el único valor fijo del archivo: los media
   queries no admiten custom properties. Si cambia ID1_HERO_BP_MOBILE en el PHP
   hay que replicarlo aquí. */

/* ── Sección ────────────────────────────────────────────── */

.id1-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--id1-hero-bg, #08162e);
	margin-top: var(--id1-hero-off-d, 0px);

	/* Altura proporcional: el ancho de la ventana dividido por la proporción
	   de la imagen, acotado entre el mínimo y el máximo. Entre ambos la foto
	   se ve completa; fuera de ellos se recorta. */
	height: clamp(
		var(--id1-hero-hmin, 800px),
		calc(100vw / var(--id1-hero-ratio, 2)),
		var(--id1-hero-hmax, 1000px)
	);
}

/* ── Imágenes ───────────────────────────────────────────── */

.id1-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.id1-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
	will-change: opacity;
}

.id1-hero__slide.is-active {
	opacity: 1;
}

.id1-hero__slide picture,
.id1-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Punto focal: la variable la escribe el shortcode en cada slide. */
.id1-hero__slide img {
	object-position: var(--id1-hero-op-d, 50% 50%);
	opacity: var(--id1-hero-img-op, 1);
}

.id1-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--id1-hero-overlay, rgba(8, 22, 46, 0.45));
	pointer-events: none;
}

/* ── Contenido y posición ───────────────────────────────── */

.id1-hero__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	/* Con desplazamiento negativo se compensa arriba para que el texto no
	   quede bajo el header. La compensación se calcula en PHP. */
	padding-top: calc(var(--id1-hero-pt-d, 48px) + var(--id1-hero-comp-d, 0px));
	padding-bottom: var(--id1-hero-pb-d, 96px);
	padding-left: max(
		var(--id1-hero-px-d, 40px),
		calc((100% - var(--id1-hero-container, 1200px)) / 2)
	);
	padding-right: max(
		var(--id1-hero-px-d, 40px),
		calc((100% - var(--id1-hero-container, 1200px)) / 2)
	);
}

.id1-hero__inner {
	max-width: var(--id1-hero-cw, 900px);
	width: 100%;
}

/* Horizontal */
.id1-hero.posh-left   .id1-hero__content { justify-content: flex-start; }
.id1-hero.posh-center .id1-hero__content { justify-content: center; }
.id1-hero.posh-right  .id1-hero__content { justify-content: flex-end; }

/* Vertical */
.id1-hero.posv-top    .id1-hero__content { align-items: flex-start; }
.id1-hero.posv-middle .id1-hero__content { align-items: center; }
.id1-hero.posv-bottom .id1-hero__content { align-items: flex-end; }

/* Alineación del texto */
.id1-hero.align-left   .id1-hero__inner { text-align: left; }
.id1-hero.align-center .id1-hero__inner { text-align: center; }
.id1-hero.align-right  .id1-hero__inner { text-align: right; }

/* ── Título ─────────────────────────────────────────────── */

.id1-hero .id1-hero__title {
	margin: 0;
	color: var(--id1-hero-title, #fff);
	font-family: var(--id1-hero-ff, inherit);
	font-weight: var(--id1-hero-fw, 500);
	font-size: var(--id1-hero-fs-d, 42px);
	line-height: var(--id1-hero-lh, 1.15);
	letter-spacing: var(--id1-hero-ls, -0.02em);
	text-wrap: balance;
}

.id1-hero .id1-hero__title b,
.id1-hero .id1-hero__title strong {
	font-weight: var(--id1-hero-fw-b, 700);
}

.id1-hero .id1-hero__title em,
.id1-hero .id1-hero__title i {
	font-style: italic;
}

/* ── Bajada ─────────────────────────────────────────────── */
/* Sin controles propios en el panel por ahora: hereda familia y peso base
   del título, tamaño fijo. Si el cliente pide ajustarla, se agregan campos
   análogos a los del título (tamaño d/m, color, peso). */

.id1-hero .id1-hero__subtitle {
	margin: 14px 0 0;
	color: var(--id1-hero-title, #fff);
	opacity: 0.88;
	font-family: var(--id1-hero-ff, inherit);
	font-weight: var(--id1-hero-fw, 500);
	font-size: 17px;
	line-height: 1.45;
}

@media (max-width: 689.98px) {
	.id1-hero .id1-hero__subtitle { font-size: 15px; }
}

/* ── Botón ──────────────────────────────────────────────── */

.id1-hero .id1-hero__button {
	display: inline-block;
	margin-top: 28px;
	padding: 13px 30px;
	border-radius: 999px;
	background: var(--id1-hero-btn-bg, #e2f1ef);
	color: var(--id1-hero-btn-fg, #08162e);
	/* Misma familia que el título: sin esto el botón heredaba la del theme
	   y el control de tipografía no le afectaba. */
	font-family: var(--id1-hero-ff, inherit);
	font-size: var(--id1-hero-btn-fs, 15px);
	font-weight: var(--id1-hero-btn-fw, 500);
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.id1-hero .id1-hero__button:hover,
.id1-hero .id1-hero__button:focus-visible {
	background: var(--id1-hero-btn-bg-h, #fff);
	color: var(--id1-hero-btn-fg-h, #08162e);
}

/* ── Puntos ─────────────────────────────────────────────── */

.id1-hero__dots {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: var(--id1-hero-dots-b, 26px);
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.id1-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--id1-hero-dot, #fff);
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.id1-hero__dot:hover { opacity: 0.75; }

.id1-hero__dot.is-active {
	opacity: 1;
	transform: scale(1.25);
}

.id1-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ── Móvil ──────────────────────────────────────────────── */

@media (max-width: 689.98px) {
	/* En móvil la altura es fija: la imagen cuadrada se agranda hacia los
	   lados hasta cubrir. */
	.id1-hero {
		margin-top: var(--id1-hero-off-m, 0px);
		height: var(--id1-hero-hm, 450px);
	}

	/* Punto focal propio: aquí el <source> ya sirve la imagen móvil. */
	.id1-hero__slide img { object-position: var(--id1-hero-op-m, 50% 50%); }

	.id1-hero .id1-hero__title { font-size: var(--id1-hero-fs-m, 28px); }

	.id1-hero .id1-hero__button { margin-top: 22px; }

	.id1-hero__content {
		padding-top: calc(var(--id1-hero-pt-m, 32px) + var(--id1-hero-comp-m, 0px));
		padding-bottom: var(--id1-hero-pb-m, 76px);
		padding-left: max(
			var(--id1-hero-px-m, 20px),
			calc((100% - var(--id1-hero-container, 1200px)) / 2)
		);
		padding-right: max(
			var(--id1-hero-px-m, 20px),
			calc((100% - var(--id1-hero-container, 1200px)) / 2)
		);
		/* En móvil el contenido siempre centrado horizontalmente. */
		justify-content: center;
	}
}

/* ── Movimiento reducido ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.id1-hero__slide,
	.id1-hero__dot,
	.id1-hero .id1-hero__button { transition: none; }
}