/* SLF Site Enhancements — estilos y animaciones estilo Apple
   Desactivar el plugin "SLF Site Enhancements" revierte todo este fichero. */

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
}

/* ---------- Footer: barra de copyright oscura, a juego con el héroe ---------- */
[data-section="section-below-footer-builder"] {
	background-color: #072029 !important;
	padding-top: 22px;
	padding-bottom: 22px;
}

[data-section="section-below-footer-builder"] .footer-copyright,
[data-section="section-below-footer-builder"] .footer-copyright a,
[data-section="section-below-footer-builder"] .footer-copyright p {
	color: rgba(255, 255, 255, 0.72) !important;
}

[data-section="section-below-footer-builder"] .footer-copyright a:hover {
	color: #ffffff !important;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- Cabecera: desenfoque al hacer scroll ---------- */
.ast-header-break-point.main-header-bar,
#masthead {
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

body.slf-scrolled .main-header-bar {
	background-color: rgba(255, 255, 255, 0.75) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 18px rgba(0, 0, 0, 0.07);
}

/* ---------- Botón de cabecera "Acceder a la Tienda" ---------- */
.ast-custom-button-link {
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease,
		background-color 0.25s ease;
	will-change: transform;
}

.ast-custom-button-link:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 20px rgba(29, 191, 193, 0.35);
}

.ast-custom-button-link:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 3px 10px rgba(29, 191, 193, 0.25);
}

/* ---------- CTAs generales del sitio (misma coherencia visual) ---------- */
.uagb-infobox-cta-link,
.uagb-btn__default-btn,
a.wp-block-button__link {
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease,
		background-color 0.25s ease, color 0.25s ease;
}

.uagb-infobox-cta-link:hover,
.uagb-btn__default-btn:hover,
a.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.uagb-infobox-cta-link:active,
.uagb-btn__default-btn:active,
a.wp-block-button__link:active {
	transform: translateY(0);
}

/* ---------- Tarjetas (info-box) ---------- */
.uagb-info-box,
.uagb-infobox__content-wrap {
	border-radius: 16px;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.wp-block-uagb-info-box:hover .uagb-infobox__content-wrap {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.09);
}

/* ---------- Imágenes: zoom sutil al pasar el ratón ---------- */
.uagb-image__figure,
.wp-block-uagb-image__figure {
	overflow: hidden;
	border-radius: 10px;
}

.uagb-image__figure img,
.wp-block-uagb-image__figure img {
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wp-block-uagb-image:hover img {
	transform: scale(1.06);
}

/* ---------- Titular del hero: tipografía más "Apple" ---------- */
.uagb-ifb-title.uagb-ifb-title h1,
h1.uagb-ifb-title,
.uagb-ifb-title h1 {
	letter-spacing: -0.02em;
	line-height: 1.08;
}

/* ==========================================================================
   Landing completa: héroe a pantalla completa (foto furgonetas + CTA tienda)
   ========================================================================== */

.slf-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	color: #ffffff;
}

.slf-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.slf-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	transform: scale(1.08);
}

.slf-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(7, 32, 41, 0.55) 0%, rgba(7, 32, 41, 0.25) 38%, rgba(7, 32, 41, 0.85) 100%),
		linear-gradient(115deg, rgba(6, 40, 48, 0.55) 0%, rgba(29, 191, 193, 0.28) 55%, rgba(6, 40, 48, 0.15) 100%);
}

.slf-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 720px;
	padding: 0 6vw clamp(56px, 9vh, 120px);
	margin: 0 auto 0 0;
}

.slf-hero__eyebrow {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fe8e9;
	margin-bottom: 18px;
}

.slf-hero__title {
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 20px;
	text-wrap: balance;
	color: #ffffff;
}

.slf-hero__subtitle {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.55;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 36px;
}

.slf-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.45);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	color: #ffffff;
	font-weight: 600;
	font-size: 1.02rem;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.3s ease, border-color 0.3s ease;
}

.slf-hero__cta svg {
	width: 16px;
	height: 16px;
	transition: transform 0.3s ease;
}

.slf-hero__cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #0f6668;
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.slf-hero__cta:hover svg {
	transform: translateX(3px);
}

.slf-hero__cta:active {
	transform: translateY(0) scale(0.98);
}

@media (max-width: 600px) {
	.slf-hero {
		align-items: flex-end;
	}

	.slf-hero__content {
		padding: 0 24px clamp(48px, 8vh, 80px);
		max-width: none;
	}
}

/* Ambiente: zoom lentísimo de la foto de fondo (Ken Burns sutil) */
@media (prefers-reduced-motion: no-preference) {
	.slf-hero__bg img {
		animation: slf-kenburns 22s ease-in-out infinite alternate;
	}
}

@keyframes slf-kenburns {
	from {
		transform: scale(1.08) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.16) translate3d(-1%, -1%, 0);
	}
}

/* Entrada suave al cargar: eyebrow, título, subtítulo y CTA en cascada */
@media (prefers-reduced-motion: no-preference) {
	.slf-hero__eyebrow,
	.slf-hero__title,
	.slf-hero__subtitle,
	.slf-hero__cta {
		opacity: 0;
		animation: slf-hero-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	}

	.slf-hero__eyebrow {
		animation-delay: 0.15s;
	}

	.slf-hero__title {
		animation-delay: 0.3s;
	}

	.slf-hero__subtitle {
		animation-delay: 0.45s;
	}

	.slf-hero__cta {
		animation-delay: 0.6s;
	}

	@keyframes slf-hero-in {
		from {
			opacity: 0;
			transform: translateY(22px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.slf-hero__bg img {
		animation: none;
		transform: scale(1.02);
	}
}

/* ---------- Aparición progresiva de secciones al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
	.slf-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
			transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.slf-reveal.slf-revealed {
		opacity: 1;
		transform: none;
	}
}

/* Sin preferencia de movimiento reducido definida por el navegador o JS aún no ejecutado:
   nunca ocultar contenido por defecto -> solo se aplica opacidad vía JS + la media query anterior. */
@media (prefers-reduced-motion: reduce) {
	.slf-reveal,
	.slf-reveal.slf-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	html {
		scroll-behavior: auto;
	}
}