/* Just4Fun Hero Interactivo
   Todos los valores editables llegan como variables CSS desde el panel. */

.j4f-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	container: j4f / inline-size;
	height: var(--j4f-height, 100vh);
	min-height: var(--j4f-min-height, 560px);
	background: var(--j4f-bg);
	color: #fff;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.j4f-hero *, .j4f-hero *::before, .j4f-hero *::after { box-sizing: border-box; }

/* Ancho completo. --j4f-sbw (ancho de la barra de scroll) lo calcula hero.js.
   !important porque los temas de bloques fuerzan margin:auto en los hijos. */
.j4f-hero.j4f-full {
	width: calc(100vw - var(--j4f-sbw, 0px)) !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw + var(--j4f-sbw, 0px) / 2) !important;
	margin-right: calc(50% - 50vw + var(--j4f-sbw, 0px) / 2) !important;
}

/* ---------- Video y capas ---------- */
.j4f-stage { position: absolute; inset: 0; z-index: -3; }
.j4f-hero .j4f-video {
	position: absolute;
	inset: -4%;
	width: 108% !important;
	height: 108%;
	max-width: none !important;
	object-fit: cover;
	filter: var(--j4f-filter);
	will-change: transform;
}
.j4f-overlay {
	position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background: var(--j4f-overlay);
}
.j4f-light {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(circle at var(--j4f-lx, 70%) var(--j4f-ly, 45%), var(--j4f-light) 0, transparent var(--j4f-light-size));
	mix-blend-mode: screen;
}
.j4f-grain {
	position: absolute; inset: -50%; z-index: -1; pointer-events: none;
	opacity: var(--j4f-grain-op);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: j4f-grain 1s steps(6) infinite;
}
@keyframes j4f-grain {
	0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
	50% { transform: translate(2%, -4%); } 75% { transform: translate(-4%, -2%); }
}

/* ---------- Estructura ---------- */
.j4f-inner {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: var(--j4f-pad);
}
.j4f-top { grid-row: 1; display: flex; }
.j4f-logo-center .j4f-top { justify-content: center; }
.j4f-logo-right .j4f-top { justify-content: flex-end; }
.j4f-hero .j4f-logo { display: block; width: var(--j4f-logo-w); max-width: 50cqw; height: auto; }
.j4f-logo-shadow { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }

.j4f-content {
	grid-row: 2;
	align-self: center;
	width: 100%;
	max-width: var(--j4f-content-w);
	padding-block: 24px;
}
.j4f-valign-top .j4f-content { align-self: start; }
.j4f-valign-bottom .j4f-content { align-self: end; }
.j4f-align-center .j4f-content { justify-self: center; text-align: center; }
.j4f-align-right .j4f-content { justify-self: end; text-align: right; }

/* ---------- Iconos ---------- */
.j4f-hero .j4f-icon-svg { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; }
.j4f-hero .j4f-icon-svg svg { width: 100%; height: 100%; overflow: visible; }
.j4f-hero .j4f-icon-img { display: inline-block; flex: none; width: 1.3em; height: 1.3em; object-fit: contain; }
.j4f-hero .j4f-icon-emoji { flex: none; line-height: 1; font-size: 1.15em; }
.j4f-hero .j4f-icon-dot {
	flex: none; width: .7em; height: .7em; border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	animation: j4f-pulse 2s infinite;
}
@keyframes j4f-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 65%, transparent); }
	70%, 100% { box-shadow: 0 0 0 .7em transparent; }
}
.j4f-hero .j4f-icon-mouse {
	position: relative; flex: none;
	width: 1.35em; height: 2em;
	border: 2px solid var(--j4f-h-color, currentColor);
	border-radius: .75em;
}
.j4f-hero .j4f-icon-mouse i {
	position: absolute; top: .4em; left: 50%;
	width: 3px; height: .45em; margin-left: -1.5px;
	border-radius: 2px; background: currentColor;
	animation: j4f-swipe 1.8s ease-in-out infinite;
}
@keyframes j4f-swipe {
	0%, 100% { transform: translateX(-.3em); } 50% { transform: translateX(.3em); }
}

/* ---------- Cintillo ---------- */
.j4f-hero .j4f-eyebrow {
	display: inline-flex; align-items: center; gap: .75em;
	margin: 0 0 22px;
	padding: .6em 1.25em .6em 1em;
	border-radius: var(--j4f-eb-radius);
	font-family: var(--j4f-eb-font);
	font-size: var(--j4f-eb-size);
	font-weight: var(--j4f-eb-weight);
	letter-spacing: var(--j4f-eb-spacing);
	text-transform: var(--j4f-eb-transform);
	line-height: 1.3;
	color: var(--j4f-eb-color) !important;
	background: var(--j4f-eb-bg);
	border: 1.5px solid var(--j4f-eb-border);
	backdrop-filter: var(--j4f-eb-blur);
	-webkit-backdrop-filter: var(--j4f-eb-blur);
}
.j4f-eb-icon { color: var(--j4f-eb-icon); }

/* ---------- Título ---------- */
.j4f-hero .j4f-title {
	margin: 0;
	padding: 0;
	display: block;
	font-family: var(--j4f-t-font);
	font-weight: var(--j4f-t-weight);
	font-size: clamp(var(--j4f-t-min), 6.4cqw, var(--j4f-t-max));
	line-height: var(--j4f-t-lh);
	letter-spacing: var(--j4f-t-spacing);
	text-transform: var(--j4f-t-transform);
	color: var(--j4f-t-color);
	text-wrap: balance;
}
.j4f-hero .j4f-title em {
	font-style: normal;
	color: var(--j4f-t-hl);
	background: linear-gradient(100deg, var(--j4f-t-hl) 10%, var(--j4f-t-hl2) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* Sticker: contorno + sombra sólida, como el logo */
.j4f-title-sticker .j4f-title {
	-webkit-text-stroke: var(--j4f-t-outline-w) var(--j4f-t-outline);
	paint-order: stroke fill;
	filter: drop-shadow(.045em .06em 0 var(--j4f-t-shadow));
	padding: .06em .08em .1em;
	margin-inline: -.08em;
}
/* Con contorno, el degradado recortado al texto queda tapado: se usa color sólido */
.j4f-title-sticker .j4f-title em {
	background: none;
	-webkit-text-fill-color: var(--j4f-t-hl);
}
.j4f-title-shadow .j4f-title {
	text-shadow: 0 .04em .25em color-mix(in srgb, var(--j4f-t-shadow) 70%, transparent);
}
.j4f-title-shadow .j4f-title em {
	text-shadow: none;
	filter: drop-shadow(0 .04em .2em color-mix(in srgb, var(--j4f-t-shadow) 60%, transparent));
}

/* ---------- Subtítulo ---------- */
.j4f-hero .j4f-sub {
	margin: 24px 0 0;
	max-width: var(--j4f-s-width);
	font-family: var(--j4f-s-font);
	font-size: var(--j4f-s-size);
	font-weight: var(--j4f-s-weight);
	line-height: var(--j4f-s-lh);
	color: var(--j4f-s-color);
	text-wrap: pretty;
}
.j4f-align-center .j4f-sub { margin-inline: auto; }
.j4f-align-right .j4f-sub { margin-left: auto; }

/* ---------- Botones ---------- */
.j4f-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.j4f-align-center .j4f-ctas { justify-content: center; }
.j4f-align-right .j4f-ctas { justify-content: flex-end; }

.j4f-hero .j4f-btn {
	--lift: 0px;
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	padding: .85em 1.5em;
	line-height: 1;
	letter-spacing: -.01em;
	text-decoration: none;
	transform: translateY(var(--lift));
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.j4f-hero .j4f-btn:hover { --lift: -2px; filter: brightness(1.06); }
.j4f-hero .j4f-btn:active { --lift: 2px; }
.j4f-hero .j4f-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.j4f-btn .j4f-icon-svg { transition: transform .18s ease; }
.j4f-btn:hover .j4f-icon-svg { transform: translateX(3px); }

.j4f-hero .j4f-btn-1 {
	font-family: var(--j4f-b1-font); font-size: var(--j4f-b1-size); font-weight: var(--j4f-b1-weight);
	color: var(--j4f-b1-color); background: var(--j4f-b1-bg); border: var(--j4f-b1-border);
	border-radius: var(--j4f-b1-radius);
	box-shadow: 0 var(--j4f-b1-shadow) 0 var(--j4f-b1-shadow-c);
	backdrop-filter: var(--j4f-b1-blur); -webkit-backdrop-filter: var(--j4f-b1-blur);
}
.j4f-hero .j4f-btn-1:hover { box-shadow: 0 var(--j4f-b1-shadow-h) 0 var(--j4f-b1-shadow-c); }
.j4f-hero .j4f-btn-2 {
	font-family: var(--j4f-b2-font); font-size: var(--j4f-b2-size); font-weight: var(--j4f-b2-weight);
	color: var(--j4f-b2-color); background: var(--j4f-b2-bg); border: var(--j4f-b2-border);
	border-radius: var(--j4f-b2-radius);
	box-shadow: 0 var(--j4f-b2-shadow) 0 var(--j4f-b2-shadow-c);
	backdrop-filter: var(--j4f-b2-blur); -webkit-backdrop-filter: var(--j4f-b2-blur);
}
.j4f-hero .j4f-btn-2:hover { box-shadow: 0 var(--j4f-b2-shadow-h) 0 var(--j4f-b2-shadow-c); }

/* ---------- Indicador ---------- */
.j4f-hint {
	grid-row: 3;
	justify-self: end;
	display: inline-flex; align-items: center; gap: .9em;
	padding: .85em 1.35em;
	border-radius: 999px;
	font-family: var(--j4f-h-font);
	font-size: var(--j4f-h-size);
	font-weight: var(--j4f-h-weight);
	text-transform: var(--j4f-h-transform);
	letter-spacing: .1em;
	line-height: 1.2;
	color: var(--j4f-h-color);
	background: var(--j4f-h-bg);
	border: 1.5px solid var(--j4f-h-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: opacity .5s;
}
.j4f-hint-left .j4f-hint { justify-self: start; }
.j4f-hint-center .j4f-hint { justify-self: center; }
.j4f-hint.is-done { opacity: .55; }
.j4f-hint-icon { color: var(--j4f-h-icon); }
.j4f-bar {
	position: relative; width: 9em; height: .5em; overflow: hidden;
	border-radius: 1em;
	background: color-mix(in srgb, var(--j4f-h-color) 18%, transparent);
}
.j4f-bar i {
	position: absolute; inset: 0 auto 0 0; width: 0;
	border-radius: 1em;
	background: linear-gradient(90deg, var(--j4f-h-bar), var(--j4f-h-bar2));
}

/* ---------- Cursor ---------- */
.j4f-cursor {
	position: absolute; left: 0; top: 0; z-index: 5;
	width: var(--j4f-c-size); height: var(--j4f-c-size);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-200px, -200px, 0);
	transition: opacity .2s;
}
.j4f-cursor.is-visible { opacity: 1; }
.j4f-cursor-icon {
	display: grid; place-items: center;
	width: 100%; height: 100%;
	color: var(--j4f-c-color);
	font-size: var(--j4f-c-size);
	transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.j4f-hero .j4f-cursor-icon.j4f-icon-svg,
.j4f-hero .j4f-cursor-icon.j4f-icon-img { width: 100%; height: 100%; }
.j4f-hero .j4f-cursor-icon.j4f-icon-emoji { font-size: calc(var(--j4f-c-size) * .85); }
.j4f-cursor-icon path {
	stroke: var(--j4f-c-outline);
	stroke-width: var(--j4f-c-outline-w);
	stroke-linejoin: round;
	paint-order: stroke fill;
	vector-effect: non-scaling-stroke;
}
.j4f-cursor.is-link.hover-grow-rotate .j4f-cursor-icon { transform: scale(1.45) rotate(-12deg); }
.j4f-cursor.is-link.hover-grow .j4f-cursor-icon { transform: scale(1.45); }
.j4f-cursor.is-down .j4f-cursor-icon { transform: scale(.8); }

@media (hover: hover) and (pointer: fine) {
	.j4f-has-cursor, .j4f-has-cursor a { cursor: none; }
}
@media (hover: none) {
	.j4f-cursor { display: none; }
}

/* ---------- Móvil (según el ancho del propio hero) ---------- */
@container j4f (max-width: 782px) {
	.j4f-overlay { background: var(--j4f-overlay-m); }
	.j4f-inner { padding: min(var(--j4f-pad), 22px); }
	.j4f-content { align-self: end; }
	.j4f-valign-top .j4f-content { align-self: start; }
	.j4f-hint, .j4f-hint-right .j4f-hint { justify-self: start; }
	.j4f-align-center .j4f-hint, .j4f-hint-center .j4f-hint { justify-self: center; }
	.j4f-ctas { margin-top: 26px; }
	.j4f-hero .j4f-btn { flex: 1 1 auto; }
	.j4f-hero .j4f-eyebrow { margin-bottom: 16px; }
	.j4f-hero .j4f-sub { margin-top: 16px; font-size: min(var(--j4f-s-size), 17px); }
}

/* ---------- Padding configurable por elemento ---------- */
.j4f-hero .j4f-content {
	padding-top: var(--j4f-content-pad-top, 24px);
	padding-right: var(--j4f-content-pad-right, 0px);
	padding-bottom: var(--j4f-content-pad-bottom, 24px);
	padding-left: var(--j4f-content-pad-left, 0px);
}
.j4f-hero .j4f-eyebrow {
	padding-top: var(--j4f-eyebrow-pad-top, .6em);
	padding-right: var(--j4f-eyebrow-pad-right, 1.25em);
	padding-bottom: var(--j4f-eyebrow-pad-bottom, .6em);
	padding-left: var(--j4f-eyebrow-pad-left, 1em);
}
.j4f-hero .j4f-title {
	padding-top: var(--j4f-title-pad-top, 0px);
	padding-right: var(--j4f-title-pad-right, 0px);
	padding-bottom: var(--j4f-title-pad-bottom, 0px);
	padding-left: var(--j4f-title-pad-left, 0px);
}
.j4f-title-sticker .j4f-title {
	padding-top: var(--j4f-title-pad-top, .06em);
	padding-right: var(--j4f-title-pad-right, .08em);
	padding-bottom: var(--j4f-title-pad-bottom, .1em);
	padding-left: var(--j4f-title-pad-left, .08em);
}
.j4f-hero .j4f-sub {
	padding-top: var(--j4f-subtitle-pad-top, 0px);
	padding-right: var(--j4f-subtitle-pad-right, 0px);
	padding-bottom: var(--j4f-subtitle-pad-bottom, 0px);
	padding-left: var(--j4f-subtitle-pad-left, 0px);
}
.j4f-hero .j4f-btn-1 {
	padding-top: var(--j4f-cta-pad-top, .85em);
	padding-right: var(--j4f-cta-pad-right, 1.5em);
	padding-bottom: var(--j4f-cta-pad-bottom, .85em);
	padding-left: var(--j4f-cta-pad-left, 1.5em);
}
.j4f-hero .j4f-btn-2 {
	padding-top: var(--j4f-cta2-pad-top, .85em);
	padding-right: var(--j4f-cta2-pad-right, 1.5em);
	padding-bottom: var(--j4f-cta2-pad-bottom, .85em);
	padding-left: var(--j4f-cta2-pad-left, 1.5em);
}
.j4f-hero .j4f-hint {
	padding-top: var(--j4f-hint-pad-top, .85em);
	padding-right: var(--j4f-hint-pad-right, 1.35em);
	padding-bottom: var(--j4f-hint-pad-bottom, .85em);
	padding-left: var(--j4f-hint-pad-left, 1.35em);
}

@container j4f (max-width: 782px) {
	.j4f-hero .j4f-content {
		padding-top: var(--j4f-content-pad-top-m, var(--j4f-content-pad-top, 24px));
		padding-right: var(--j4f-content-pad-right-m, var(--j4f-content-pad-right, 0px));
		padding-bottom: var(--j4f-content-pad-bottom-m, var(--j4f-content-pad-bottom, 24px));
		padding-left: var(--j4f-content-pad-left-m, var(--j4f-content-pad-left, 0px));
	}
	.j4f-hero .j4f-eyebrow {
		padding-top: var(--j4f-eyebrow-pad-top-m, var(--j4f-eyebrow-pad-top, .6em));
		padding-right: var(--j4f-eyebrow-pad-right-m, var(--j4f-eyebrow-pad-right, 1.25em));
		padding-bottom: var(--j4f-eyebrow-pad-bottom-m, var(--j4f-eyebrow-pad-bottom, .6em));
		padding-left: var(--j4f-eyebrow-pad-left-m, var(--j4f-eyebrow-pad-left, 1em));
	}
	.j4f-hero .j4f-title {
		padding-top: var(--j4f-title-pad-top-m, var(--j4f-title-pad-top, 0px));
		padding-right: var(--j4f-title-pad-right-m, var(--j4f-title-pad-right, 0px));
		padding-bottom: var(--j4f-title-pad-bottom-m, var(--j4f-title-pad-bottom, 0px));
		padding-left: var(--j4f-title-pad-left-m, var(--j4f-title-pad-left, 0px));
	}
	.j4f-title-sticker .j4f-title {
		padding-top: var(--j4f-title-pad-top-m, var(--j4f-title-pad-top, .06em));
		padding-right: var(--j4f-title-pad-right-m, var(--j4f-title-pad-right, .08em));
		padding-bottom: var(--j4f-title-pad-bottom-m, var(--j4f-title-pad-bottom, .1em));
		padding-left: var(--j4f-title-pad-left-m, var(--j4f-title-pad-left, .08em));
	}
	.j4f-hero .j4f-sub {
		padding-top: var(--j4f-subtitle-pad-top-m, var(--j4f-subtitle-pad-top, 0px));
		padding-right: var(--j4f-subtitle-pad-right-m, var(--j4f-subtitle-pad-right, 0px));
		padding-bottom: var(--j4f-subtitle-pad-bottom-m, var(--j4f-subtitle-pad-bottom, 0px));
		padding-left: var(--j4f-subtitle-pad-left-m, var(--j4f-subtitle-pad-left, 0px));
	}
	.j4f-hero .j4f-btn-1 {
		padding-top: var(--j4f-cta-pad-top-m, var(--j4f-cta-pad-top, .85em));
		padding-right: var(--j4f-cta-pad-right-m, var(--j4f-cta-pad-right, 1.5em));
		padding-bottom: var(--j4f-cta-pad-bottom-m, var(--j4f-cta-pad-bottom, .85em));
		padding-left: var(--j4f-cta-pad-left-m, var(--j4f-cta-pad-left, 1.5em));
	}
	.j4f-hero .j4f-btn-2 {
		padding-top: var(--j4f-cta2-pad-top-m, var(--j4f-cta2-pad-top, .85em));
		padding-right: var(--j4f-cta2-pad-right-m, var(--j4f-cta2-pad-right, 1.5em));
		padding-bottom: var(--j4f-cta2-pad-bottom-m, var(--j4f-cta2-pad-bottom, .85em));
		padding-left: var(--j4f-cta2-pad-left-m, var(--j4f-cta2-pad-left, 1.5em));
	}
	.j4f-hero .j4f-hint {
		padding-top: var(--j4f-hint-pad-top-m, var(--j4f-hint-pad-top, .85em));
		padding-right: var(--j4f-hint-pad-right-m, var(--j4f-hint-pad-right, 1.35em));
		padding-bottom: var(--j4f-hint-pad-bottom-m, var(--j4f-hint-pad-bottom, .85em));
		padding-left: var(--j4f-hint-pad-left-m, var(--j4f-hint-pad-left, 1.35em));
	}
}

/* Arrastre en táctil: permite el scroll vertical de la página */
.j4f-hero[data-mode="touch"] { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
	.j4f-icon-dot, .j4f-icon-mouse i, .j4f-grain { animation: none; }
	.j4f-btn, .j4f-btn .j4f-icon-svg, .j4f-cursor-icon { transition: none; }
}

/* Accessible playback, scoped to Hero; no theme-wide button changes. */
.j4f-hero .j4f-video-toggle { position:absolute;z-index:5;right:24px;bottom:24px;max-width:calc(100% - 48px);padding:10px 16px;border:1px solid #fff;border-radius:24px;background:#230a32;color:#fff;cursor:pointer;font:inherit; }
.j4f-hero .j4f-video-toggle:focus-visible { outline:3px solid #fff;outline-offset:4px; }

/* Nine logo positions; top aliases keep the existing grid layout unchanged. */
.j4f-hero { box-sizing: border-box; }
.j4f-hero.j4f-logo-free { min-height:max(var(--j4f-min-height),var(--j4f-logo-layout-height,0px)); }
.j4f-hero.j4f-logo-free .j4f-top { grid-row:auto;grid-column:auto;position:absolute;z-index:2;left:var(--j4f-logo-x,0px);top:var(--j4f-logo-y,0px);width:max-content;max-width:100%;display:block; }
.j4f-hero.j4f-logo-free .j4f-content { transform:translate(var(--j4f-logo-content-x,0px),var(--j4f-logo-content-y,0px)); }

/* Shared content: logo and text follow the same content box and its spacing. */
.j4f-hero.j4f-common-content {min-height:max(var(--j4f-min-height),var(--j4f-common-height,0px));}
.j4f-common-content .j4f-inner {display:flex;flex-direction:column;gap:20px;}
.j4f-common-content .j4f-content {flex-shrink:0;display:flex;flex-direction:column;gap:var(--j4f-row-gap,0px);margin-block:auto;min-width:0;}
.j4f-common-content.j4f-valign-top .j4f-content {margin-top:0;}
.j4f-common-content.j4f-valign-bottom .j4f-content {margin-bottom:0;}
.j4f-common-content.j4f-align-center .j4f-content {align-self:center;}
.j4f-common-content.j4f-align-right .j4f-content {align-self:flex-end;}
.j4f-content-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--j4f-column-gap,16px);min-width:0;max-width:100%;}
.j4f-content-row:empty {display:none;}
.j4f-align-center .j4f-content-row {justify-content:center;}
.j4f-align-right .j4f-content-row {justify-content:flex-end;}
.j4f-content-row > * {min-width:0;max-width:100%;flex-shrink:1;overflow-wrap:anywhere;}
.j4f-common-content .j4f-hint {flex-shrink:0;align-self:flex-end;}
.j4f-common-content.j4f-hint-bottom-left .j4f-hint {align-self:flex-start;}
.j4f-common-content.j4f-hint-bottom-center .j4f-hint {align-self:center;}
@container j4f (max-width:782px) {
 .j4f-common-content .j4f-content {gap:var(--j4f-row-gap-mobile,var(--j4f-row-gap,0px));}
 .j4f-content-row {gap:var(--j4f-column-gap-mobile,var(--j4f-column-gap,16px));}
}

.j4f-common-content .j4f-inner {padding-bottom:max(var(--j4f-pad),80px);}
@container j4f (max-width:782px){.j4f-common-content .j4f-inner {padding-bottom:80px;}}

.j4f-hero .j4f-video-toggle.j4f-video-toggle-keyboard:not(:focus-visible){width:1px;height:1px;padding:0;border:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}

/* Reserve configured common content before the first measurement. */
.j4f-hero.j4f-common-content { height:auto; display:flex; flex-direction:column; }
.j4f-hero.j4f-common-content .j4f-inner { height:auto; flex:1 0 auto; }