/* ==========================================================================
   VSE Immersive Hero Widget — Stylesheet v1.5.0
   ========================================================================== */

/* ── Base ──────────────────────────────────────────────────────────────────── */
.vsa-hero {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ── Background ────────────────────────────────────────────────────────────── */
.vsa-hero__bg { position: absolute; inset: 0; z-index: 0; }

.vsa-hero__bg-image {
	position: absolute;
	inset: -6%;
	background-size: cover;
	background-position: center;
	will-change: transform;
	transform-origin: center center;
}

/* ── Ken Burns ─────────────────────────────────────────────────────────────── */
@keyframes vsaKenBurns    { 0% { transform: scale(1.00); } 100% { transform: scale(1.08); } }
@keyframes vsaKenBurnsAlt { 0% { transform: scale(1.08) translate(1%,-0.5%); } 100% { transform: scale(1.00) translate(0%,0%); } }
.vsa-kenburn     { animation: vsaKenBurns    14s ease-in-out forwards; }
.vsa-kenburn-alt { animation: vsaKenBurnsAlt 14s ease-in-out forwards; }

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.vsa-hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── Slider ────────────────────────────────────────────────────────────────── */
.vsa-hero__slider { position: absolute; inset: 0; }
.vsa-hero__slide {
	position: absolute; inset: -6%;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.5s ease-in-out;
	z-index: 1; will-change: transform, opacity;
}
.vsa-hero__slide.is-active { opacity: 1; z-index: 2; }

/* ── Video ─────────────────────────────────────────────────────────────────── */
.vsa-hero__video-bg { position: absolute; inset: 0; overflow: hidden; }
.vsa-hero__video-mp4 { position: absolute; min-width:100%; min-height:100%; width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; }
.vsa-hero__yt-player, .vsa-hero__vimeo-player { position: absolute; inset: 0; overflow: hidden; }
.vsa-hero__yt-player iframe, .vsa-hero__vimeo-player iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:150vw; height:84.375vw; min-height:100vh; min-width:177.78vh; pointer-events:none; border:0; }
.vsa-hero__video-poster { position:absolute; inset:0; background-size:cover; background-position:center; z-index:1; transition:opacity 1s ease; }

/* ── Fog ───────────────────────────────────────────────────────────────────── */
.vsa-hero__fog-wrap { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.vsa-hero__fog { position:absolute; left:0; width:200%; height:var(--vsa-fog-h,45%); will-change:transform; background-size:auto 100%; background-repeat:repeat-x; }
.vsa-hero__fog-wrap[data-pos="top"]    .vsa-hero__fog { top:0; }
.vsa-hero__fog-wrap[data-pos="center"] .vsa-hero__fog { top:50%; margin-top:calc(var(--vsa-fog-h,45%) * -0.5); }
.vsa-hero__fog-wrap[data-pos="bottom"] .vsa-hero__fog { bottom:0; top:auto; }
.vsa-hero__fog-wrap[data-pos="full"]   .vsa-hero__fog { top:0; height:100%; }
@keyframes vsaFogRight { 0% { transform:translateX(0); }    100% { transform:translateX(-50%); } }
@keyframes vsaFogLeft  { 0% { transform:translateX(-50%); } 100% { transform:translateX(0); } }

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.vsa-hero__logo {
	position: absolute;
	top: 28px;
	left: 0;
	right: 0;
	z-index: 6;
	display: flex;
	padding: 0 36px;
	pointer-events: auto;
}
.vsa-hero__logo--left   { justify-content: flex-start; }
.vsa-hero__logo--center { justify-content: center; }
.vsa-hero__logo--right  { justify-content: flex-end; }

.vsa-hero__logo a { display: inline-flex; line-height: 0; text-decoration: none; }
.vsa-hero__logo img {
	display: block;
	width: 140px;
	height: auto;
	max-height: 80px;
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* ── Foreground ────────────────────────────────────────────────────────────────
   Positioning model:
   - left: 50%  (always center of hero)
   - --vsa-fg-offset: horizontal px from center (Elementor writes this on wrapper)
   - --vsa-fg-bottom: bottom offset px (Elementor writes this on wrapper)
   - --vsa-fg-scroll-y: set by JS scroll listener for parallax depth effect
   Size never changes when moving horizontally — only the translate shifts.
   ─────────────────────────────────────────────────────────────────────────── */
.vsa-hero__fg {
	position: absolute;
	left: 50%;
	bottom: var(--vsa-fg-bottom, -60px);
	transform:
		translateX(calc(-50% + var(--vsa-fg-offset, 0px)))
		translateY(calc(-1 * var(--vsa-fg-scroll-y, 0px)));
	z-index: 4;
	pointer-events: none;
	will-change: transform;
	transform-origin: center bottom;
}

.vsa-hero__fg-image {
	display: block;
	max-width: none;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 8px 32px rgba(0,0,0,0.55));
}

/* ── Content ───────────────────────────────────────────────────────────────── */
.vsa-hero__content {
	position: relative;
	z-index: 5;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	padding: 40px;
	text-align: center;
	pointer-events: none;
}
.vsa-hero__content > * { pointer-events: auto; }

.vsa-hero__content-inner {
	display: flex;
	flex-direction: column;
	max-width: 820px;
	width: 100%;
	align-self: center;
	align-items: center;
}

/* Alignment driven by Elementor text-align */
.vsa-hero__content[style*="text-align: left"]   .vsa-hero__content-inner,
.vsa-hero__content[style*="text-align:left"]    .vsa-hero__content-inner { align-items: flex-start; }
.vsa-hero__content[style*="text-align: center"] .vsa-hero__content-inner,
.vsa-hero__content[style*="text-align:center"]  .vsa-hero__content-inner { align-items: center; }
.vsa-hero__content[style*="text-align: right"]  .vsa-hero__content-inner,
.vsa-hero__content[style*="text-align:right"]   .vsa-hero__content-inner { align-items: flex-end; }

/* ── CTAs ──────────────────────────────────────────────────────────────────── */
.vsa-hero__ctas { display:flex; flex-wrap:wrap; gap:14px; align-self:stretch; justify-content:center; }
.vsa-hero__content[style*="text-align: left"]  .vsa-hero__ctas,
.vsa-hero__content[style*="text-align:left"]   .vsa-hero__ctas { justify-content: flex-start; }
.vsa-hero__content[style*="text-align: right"] .vsa-hero__ctas,
.vsa-hero__content[style*="text-align:right"]  .vsa-hero__ctas { justify-content: flex-end; }

/* Flancos mode */
.vsa-cta--flancos .vsa-hero__ctas { flex-wrap:nowrap; justify-content:center; gap:var(--vsa-flancos-gap,340px); align-items:center; }

/* ── CTA button ────────────────────────────────────────────────────────────── */
.vsa-hero__cta {
	display:inline-flex; align-items:center; justify-content:center;
	gap:8px; padding:14px 28px; border-radius:50px;
	font-size:.95rem; font-weight:600; text-decoration:none !important;
	transition:background-color .25s, transform .22s, box-shadow .25s, color .25s;
	cursor:pointer; white-space:nowrap; line-height:1;
}
.vsa-hero__cta--1 { background-color:#ec4899; color:#fff; }
.vsa-hero__cta--1:hover { background-color:#db2777; color:#fff; transform:translateY(-3px); box-shadow:0 10px 28px rgba(236,72,153,.45); }
.vsa-hero__cta--2 { background-color:#0ea5e9; color:#fff; }
.vsa-hero__cta--2:hover { background-color:#0284c7; color:#fff; transform:translateY(-3px); box-shadow:0 10px 28px rgba(14,165,233,.45); }

.vsa-cta-icon { display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
.vsa-cta-icon i   { font-size:18px !important; color:inherit; line-height:1; }
.vsa-cta-icon svg { width:18px !important; height:18px !important; fill:currentColor; }

/* ── Badge ─────────────────────────────────────────────────────────────────── */
.vsa-hero__badge-wrap { margin-bottom:20px; }
.vsa-hero__badge { display:inline-flex; align-items:center; gap:6px; background-color:#7c3aed; color:#fff; padding:6px 18px; border-radius:50px; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.vsa-badge-icon { display:inline-flex; align-items:center; line-height:1; flex-shrink:0; }
.vsa-badge-icon i   { font-size:14px !important; color:inherit; line-height:1; }
.vsa-badge-icon svg { width:14px !important; height:14px !important; fill:currentColor; }

/* ── Text ──────────────────────────────────────────────────────────────────── */
.vsa-hero__title       { font-size:clamp(1.8rem,4vw,3.2rem); font-weight:800; color:#fff; line-height:1.15; margin:0 0 16px; text-shadow:0 2px 12px rgba(0,0,0,.4); width:100%; }
.vsa-hero__subtitle1   { font-size:clamp(1.1rem,2.5vw,1.6rem); font-weight:600; color:#f0f0f0; margin:0 0 12px; width:100%; }
.vsa-hero__subtitle2   { font-size:clamp(.95rem,2vw,1.25rem); font-weight:400; color:#e0e0e0; margin:0 0 12px; width:100%; }
.vsa-hero__description { font-size:clamp(.9rem,1.5vw,1.05rem); color:#e8e8e8; line-height:1.75; margin:0 0 32px; max-width:620px; width:100%; }

/* ── Social Proof — above CTAs ─────────────────────────────────────────────── */
.vsa-hero__social-proof {
	font-size: .8rem;
	color: rgba(255,255,255,0.65);
	margin-top: 0;
	margin-bottom: 14px; /* space BELOW proof, above CTAs */
	letter-spacing: .02em;
	text-align: center;
	width: 100%;
}

/* ── Description desktop/mobile variants ───────────────────────────────────── */
/* .vsa-desc-desktop  → visible on desktop only (≥1025px)                       */
/* .vsa-desc-mobile   → visible on tablet + mobile only (≤1024px)               */
.vsa-desc-mobile  { display: none; } /* hidden on desktop by default */

/* ── Utility ───────────────────────────────────────────────────────────────── */
.vsa-hide-mob { /* applied in @media */ }

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET (≤1024px) — switch description variants
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.vsa-desc-desktop { display: none !important; }  /* hide long desktop version */
	.vsa-desc-mobile  { display: block !important; } /* show short mobile/tablet version */
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE (≤767px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	.vsa-hide-mob        { display: none !important; }
	.vsa-fog-hide-mob .vsa-hero__fog-wrap { display: none; }
	.vsa-fg-hide-mob  .vsa-hero__fg       { display: none; }

	.vsa-hero__logo { top: 18px; padding: 0 18px; }

	.vsa-hero__content { text-align:center !important; padding:24px 20px; }
	.vsa-hero__content-inner { align-items:center !important; max-width:100%; }

	/* Mobile fg: sit flush at bottom, scroll parallax still works via CSS var */
	.vsa-hero__fg {
		bottom: 0 !important;
		transform:
			translateX(calc(-50% + var(--vsa-fg-offset, 0px)))
			translateY(calc(-1 * var(--vsa-fg-scroll-y, 0px))) !important;
	}

	.vsa-hero__ctas { flex-direction:column; align-items:stretch; gap:10px; width:100%; max-width:340px; margin:0 auto; }
	.vsa-cta--flancos .vsa-hero__ctas { flex-direction:column; gap:10px; }
	.vsa-hero__cta { width:100%; justify-content:center; }

	.vsa-hero__social-proof { font-size:.75rem; margin-bottom: 12px; }

	.vsa-hero__title     { font-size:clamp(1.4rem,6vw,1.9rem); margin-bottom:10px; }
	.vsa-hero__subtitle1 { font-size:clamp(1rem,4.5vw,1.2rem); margin-bottom:8px; }
	.vsa-hero__subtitle2 { font-size:clamp(.85rem,4vw,1rem); }
	.vsa-hero__description { font-size:.88rem; line-height:1.6; }

	.vsa-hero__yt-player iframe,
	.vsa-hero__vimeo-player iframe { width:300vw; height:168.75vw; }
}

@media (max-width: 480px) {
	.vsa-hero__title { font-size:1.4rem; }
}