/* =========================================================================
   XTRALIFE — Slider principal (.xt-hero, slides del maquetador)
   La composición base vive en las clases globales del maquetador. Aquí solo:
     · dorado más oscuro y texto blanco en el botón principal,
     · botón secundario «Explore Products» (lo inserta assets/js/pz-hero.js),
     · filete dorado bajo el título.
   El prefijo `html body .oz-pb-root` hace falta para ganar a global.css del
   maquetador, que fuerza `color: inherit` en todos los enlaces de .oz-pb-text.
   ========================================================================= */

/* Botón principal + secundario en una fila. */
html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text a {
	background: linear-gradient(90deg, #a67a26 0%, #b98a2e 100%);
	color: #fff;
}

html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text a:hover,
html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text a:focus-visible {
	background: linear-gradient(90deg, #8c6620 0%, #a07727 100%);
	color: #fff;
	box-shadow: none;
}

/* Secundario: blanco con filete verde, como «Explore Products». */
html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text a.xt-hero__btn2 {
	background: #fff;
	color: var(--xl-green, #0e4d2c);
	box-shadow: inset 0 0 0 1.5px var(--xl-green, #0e4d2c);
}

html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text a.xt-hero__btn2:hover,
html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text a.xt-hero__btn2:focus-visible {
	background: var(--xl-green, #0e4d2c);
	color: #fff;
	box-shadow: none;
}

/* Filete dorado bajo el título. */
html body .oz-pb-root .xt-hero .xt-hero__title .oz-pb-text :is(h1, h2)::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: clamp(12px, 1vw, 18px);
	border-radius: 2px;
	background: linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%);
}

/* Móvil (mismo corte que el maquetador): texto centrado arriba y botones
   centrados al pie del banner, por encima de los puntos del slider. */
@media (max-width: 767px) {
	/* Más bajo que los 600–620px del panel; `fit-content` evita recortar si
	   el texto de algún slide necesita más alto. */
	html body .oz-pb-root .xt-hero.xt-hero {
		height: 540px;
		min-height: 540px;
		min-height: fit-content;
	}

	html body .oz-pb-root .xt-hero .xt-hero__col {
		align-items: center;
		padding: 32px 20px 56px;
		text-align: center;
	}

	/* Imagen a todo el ancho y apoyada abajo. El maquetador la fija a un 74%
	   del alto (con !important) y, con el banner más bajo, dejaba huecos. */
	html body .oz-pb-root .xt-hero .oz-pb-section__media-bg {
		background-size: 100% auto !important;
		background-position: center bottom !important;
	}

	/* Velo blanco más corto: solo cubre el bloque de texto. */
	html body .oz-pb-root .xt-hero .oz-pb-section__media-bg::after {
		background: linear-gradient(180deg, rgba(248, 249, 248, .96) 0%, rgba(248, 249, 248, .85) 30%, rgba(248, 249, 248, 0) 48%);
	}

	html body .oz-pb-root .xt-hero .xt-hero__title .oz-pb-text :is(h1, h2),
	html body .oz-pb-root .xt-hero .xt-hero__desc .oz-pb-text p {
		margin-inline: auto;
		text-align: center;
	}

	html body .oz-pb-root .xt-hero .xt-hero__title .oz-pb-text :is(h1, h2)::after {
		margin-inline: auto;
	}

	/* `margin-top: auto` lo empuja al fondo de la columna; el maquetador
	   escribe el margen del bloque en línea, de ahí el !important. */
	html body .oz-pb-root .xt-hero .xt-hero__cta {
		margin-top: auto !important;
	}

	html body .oz-pb-root .xt-hero .xt-hero__cta .oz-pb-text p {
		justify-content: center;
		margin-top: 0;
	}
}