:root{
--jf-bg: #0c0c0e;
--jf-surface: #151517;
--jf-surface-2: #1b1b1e;
--jf-border: #2a2a2e;
--jf-red: #c1272d;
--jf-red-hover: #e0342b;
--jf-wine: #6b002d;
--jf-text: #f2f2f2;
--jf-muted: #b3b3b3;
--jf-card-bg: #ffffff;
--jf-faint: #6f6f77;
}

/* Fondo base: .jf-banner/.jf-tarjeta ya traen su propio fondo oscuro,
   pero el resto del layout (h1 que genera el plugin impleCode, buscador,
   contenedor general) no tenia ningun fondo/color propio y heredaba el
   blanco por defecto del navegador. body.ecommerce-product-catalog es la
   clase que el plugin agrega en TODA pagina de catalogo (listado y
   categorias), asi que cubre tambien el h1 que queda fuera de .jf-catalogo-layout. */
/* html antepuesto sube la especificidad para ganarle a otras reglas !important
   con igual especificidad (el plugin/tema viejo tiene varias sobre "body").
   /products/ (la pagina principal del catalogo) no pasa por el combine de
   CSS de LiteSpeed como las categorias, asi que el orden de carga real es
   distinto al de los bundles combinados -- por eso hace falta mas fuerza
   aca, no alcanza igual especificidad. */
html body.ecommerce-product-catalog{ background-color: var(--jf-bg) !important; color: var(--jf-text) !important; }
html body.ecommerce-product-catalog h1.entry-title{ color: var(--jf-text) !important; }
.jf-catalogo-layout{ background: var(--jf-bg); color: var(--jf-text); }

/* .page-header/.site-main/#page/#content/main/article son restos del tema
   viejo (OceanWP) o wrappers genericos del plugin con fondo claro propio
   (#f5f5f5/#f1f1f1) que tapaban el fondo oscuro del body entre el banner y
   las tarjetas. El h1 "Catalogos" (.page-header-title) es distinto del h1
   "Catalogo" (.entry-title) de mas arriba -- este tambien necesitaba color
   y, a pedido de William, quedar centrado. */
html body.ecommerce-product-catalog .page-header,
html body.ecommerce-product-catalog .site-main,
html body.ecommerce-product-catalog #page,
html body.ecommerce-product-catalog #content,
html body.ecommerce-product-catalog main,
html body.ecommerce-product-catalog article.jf-product-listing,
html body.ecommerce-product-catalog .ic-catalog-container{ background-color: var(--jf-bg) !important; }
html body.ecommerce-product-catalog .page-header-title{ color: var(--jf-text) !important; text-align: center !important; }

/* ---------- Cabecera del catalogo ---------- */
.jf-banner{
	position: relative;
	background: linear-gradient(115deg, var(--jf-bg) 42%, #170a10 78%, var(--jf-wine) 135%);
	color: var(--jf-text);
	padding: 44px 32px 40px;
	display: grid;
	grid-template-columns: minmax(260px, 1fr) auto;
	align-items: center;
	gap: 40px;
	overflow: hidden;
	isolation: isolate;
}
.jf-banner-foto{ position: absolute; inset: 0 12% 0 32%; z-index: 0; pointer-events: none; }
.jf-banner-foto img{
	width: 100%; height: 100%; object-fit: cover; object-position: center;
	opacity: .9;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 72%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 38%, #000 72%, transparent);
}
.jf-banner-texto, .jf-banner-beneficios{ position: relative; z-index: 1; }
.jf-banner-texto{ max-width: 620px; }
.jf-banner-eyebrow{
	font-family: var(--display, "Jost", sans-serif);
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
	color: var(--jf-red-hover); margin: 0 0 10px;
}
.jf-banner-titulo{
	font-family: var(--display, "Jost", sans-serif);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 58px);
	line-height: .98;
	text-transform: uppercase;
	margin: 0 0 14px;
	text-wrap: balance;
}
.jf-banner-titulo-alt{ display: block; color: var(--jf-red); }
.jf-banner-sub{ font-size: 15.5px; color: var(--jf-muted); margin: 0; line-height: 1.55; max-width: 46ch; }

.jf-banner-beneficios{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.jf-beneficio{ display: flex; align-items: center; gap: 12px; }
.jf-beneficio svg{ color: var(--jf-red); flex: none; }
.jf-beneficio span{ font-size: 13.5px; line-height: 1.32; color: var(--jf-text); }

/* ---------- Buscador (fila propia debajo de la cabecera) ---------- */
.jf-buscador-fila{ max-width: 1460px; margin: 0 auto; padding: 24px 24px 0; }
.jf-banner-buscador{ margin: 0; }
.jf-banner-buscador-campo{
	position: relative;
	display: flex; align-items: center; gap: 4px;
	max-width: 720px; height: 54px; padding: 0 6px 0 14px;
	background: var(--jf-surface); border: 1px solid #2A2A2D; border-radius: 10px;
	transition: border-color .18s ease;
}
.jf-banner-buscador-campo:focus-within{ border-color: var(--jf-red); }
.jf-buscador-lupa{ color: var(--jf-muted); flex: none; }
.jf-banner-buscador-campo input[type=search]{
	flex: 1; height: 100%; padding: 0 10px; font-size: 15px;
	border: 0; background: transparent; color: var(--jf-text); outline: none;
}
.jf-banner-buscador-campo input[type=search]::placeholder{ color: var(--jf-faint); }
.jf-banner-buscador-btn{
	flex: none; width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	background: var(--jf-red); color: #fff; border: 0; border-radius: 8px;
	cursor: pointer; transition: background .15s ease;
}
.jf-banner-buscador-btn:hover{ background: var(--jf-red-hover); }
.jf-banner-ejemplo{ font-size: 12.5px; color: var(--jf-muted); margin: 10px 0 0; }

@media (max-width: 900px){
	.jf-banner{ grid-template-columns: 1fr; padding: 32px 20px 28px; gap: 26px; }
	.jf-banner-foto{ inset: 0; opacity: .38; }
	.jf-banner-foto img{ -webkit-mask-image: none; mask-image: none; }
	.jf-banner-beneficios{ flex-direction: row; flex-wrap: wrap; gap: 14px 22px; }
	.jf-beneficio span{ font-size: 12px; }
	.jf-buscador-fila{ padding: 18px 20px 0; }
	.jf-banner-buscador-campo{ max-width: none; }
}
.jf-autocomplete-item{ display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; color: var(--jf-text); text-decoration: none; }
.jf-autocomplete-item:hover, .jf-autocomplete-item.jf-sel{ background: var(--jf-surface-2); }
.jf-autocomplete-item img{ width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 3px; flex: none; }
.jf-autocomplete-item mark{ background: transparent; color: var(--jf-red-hover); font-weight: 600; }
.jf-autocomplete-codigo{ margin-left: auto; font-size: 12px; color: var(--jf-muted); font-variant-numeric: tabular-nums; }

.jf-cat-fila{
display: flex; gap: 10px; overflow-x: auto; padding: 18px 24px;
background: var(--jf-bg); border-bottom: 1px solid var(--jf-border);
}
.jf-cat-item{
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: var(--jf-surface); border: 1px solid var(--jf-border); border-radius: 6px;
padding: 12px 16px; color: var(--jf-muted); font-size: 12px; cursor: pointer;
flex: 0 0 auto; min-width: 84px;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jf-cat-item svg{ color: inherit; transition: transform .2s ease; }
.jf-cat-item img{ transition: transform .2s ease; }
.jf-cat-item:hover{
border-color: var(--jf-red); color: var(--jf-text);
transform: translateY(-4px); box-shadow: 0 10px 22px rgba(193,39,45,.16);
}
.jf-cat-item:hover svg, .jf-cat-item:hover img{ transform: scale(1.05); }
.jf-cat-item.is-activa{ background: var(--jf-red); border-color: var(--jf-red); color: #fff; }
.jf-cat-item.is-activa:hover{ transform: translateY(-4px); box-shadow: 0 10px 22px rgba(193,39,45,.3); }

/* Barrido rojo al cambiar de categoria/filtro (ver cargarProductos() en catalog.js) */
.jf-catalogo-principal{ position: relative; }
.jf-barrido{
position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
opacity: 0;
}
.jf-barrido::before{
content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%;
background: linear-gradient(100deg, transparent, rgba(193,39,45,.35) 45%, transparent 90%);
}
.jf-barrido.jf-barrido-activo{ opacity: 1; }
.jf-barrido.jf-barrido-activo::before{ animation: jf-barrido-mueve .5s cubic-bezier(.2,.7,.2,1); }
@keyframes jf-barrido-mueve{ to{ left: 100%; } }
.jf-cat-gx{ margin-left: auto; }
.jf-cat-gx img{ border-radius: 3px; }

.jf-breadcrumb{ max-width: 1460px; margin: 0 auto; padding: 16px 24px 0; font-size: 12.5px; color: var(--jf-muted); }
.jf-breadcrumb a{ color: var(--jf-muted); text-decoration: none; }
.jf-breadcrumb a:hover{ color: var(--jf-text); }
.jf-toolbar{
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
max-width: 1460px; margin: 0 auto; padding: 8px 24px 18px;
}
.jf-contador{ font-size: 18px; font-weight: 700; color: var(--jf-text); margin: 0; }
.jf-toolbar-derecha{ display: flex; align-items: center; gap: 16px; }
.jf-vista-toggle{ display: flex; border: 1px solid var(--jf-border); border-radius: 6px; overflow: hidden; }
.jf-vista-btn{ background: var(--jf-surface); border: 0; color: var(--jf-muted); padding: 8px 10px; cursor: pointer; }
.jf-vista-btn.is-activa{ background: var(--jf-red); color: #fff; }
.jf-orden{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jf-muted); }
.jf-select{
background: var(--jf-surface); border: 1px solid var(--jf-border); color: var(--jf-text);
padding: 8px 10px; border-radius: 6px; font-size: 13px;
}

.jf-catalogo-layout{
	display: flex; gap: 26px; align-items: flex-start;
	max-width: 1460px; margin: 0 auto; padding: 0 24px 40px;
}
/* Boton que abre el panel de filtros en mobile (oculto en desktop) */
.jf-filtros-boton{
	display: none; width: 100%; align-items: center; justify-content: center; gap: 8px;
	background: var(--jf-surface); border: 1px solid var(--jf-border); color: var(--jf-text);
	border-radius: 8px; padding: 13px; font-size: 14px; font-weight: 600; cursor: pointer;
	margin: 0 0 16px;
}
.jf-filtros-boton:hover{ border-color: var(--jf-red); }
.jf-sheet-fondo{ display: none; }
.jf-sheet-acciones{ display: none; }
.jf-sidebar{
flex: 0 0 260px; background: var(--jf-surface); border: 1px solid var(--jf-border); border-radius: 8px;
padding: 20px; position: sticky; top: 16px;
}
.jf-sidebar-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.jf-sidebar-header h2{ font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--jf-text); }
.jf-link-limpiar{ background: none; border: 0; color: var(--jf-red-hover); font-size: 12.5px; cursor: pointer; padding: 0; }
.jf-filtro-grupo{ margin: 0 0 20px; }
.jf-filtro-grupo h3{ font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--jf-muted); margin: 0 0 10px; }
.jf-check{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--jf-text); margin-bottom: 8px; cursor: pointer; }
.jf-check input{ accent-color: var(--jf-red); width: 15px; height: 15px; }
.jf-input-buscar-modelo{
width: 100%; box-sizing: border-box; background: var(--jf-surface-2); border: 1px solid var(--jf-border);
color: var(--jf-text); padding: 9px 11px; border-radius: 6px; font-size: 13.5px; margin-bottom: 10px;
}
.jf-lista-modelos{ max-height: 220px; overflow-y: auto; }

.jf-catalogo-principal{ flex: 1; min-width: 0; }

.jf-product-listing .product-list{
display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0;
}
.jf-product-listing .product-list > *{ min-width: 0; }
.jf-product-listing .product-list.jf-vista-lista{ grid-template-columns: 1fr; }
@media (max-width: 1300px){ .jf-product-listing .product-list{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px){ .jf-product-listing .product-list{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){ .jf-product-listing .product-list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .jf-product-listing .product-list{ grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.jf-tarjeta{ position:relative; padding:2px; border-radius:10px; }
.jf-tarjeta-borde{
position:absolute; inset:0; border-radius:10px; padding:2px;
background:conic-gradient(from var(--ang,0deg), var(--jf-red), transparent 25%, transparent 75%, var(--jf-wine));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:.55; transition:opacity .3s ease;
}
@property --ang{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
.jf-tarjeta.jf-en-vista .jf-tarjeta-borde{ animation:jf-borde-spin 6s linear infinite; }
@keyframes jf-borde-spin{ to{ --ang:360deg; } }
.jf-tarjeta:hover .jf-tarjeta-borde{ opacity:1; animation-duration:2.2s; }
.jf-tarjeta-inner{
position:relative; background:var(--jf-surface); border-radius:8px; overflow:hidden;
display:flex; flex-direction:column; height:100%;
transition:transform .15s ease, filter .2s ease;
transform-style: preserve-3d; will-change: transform;
}
.jf-tarjeta:hover .jf-tarjeta-inner{ filter: brightness(1.04); }
.jf-tarjeta-media{ position:relative; aspect-ratio:1/1; }
.jf-tarjeta-abrir{ display:block; width:100%; height:100%; }
.jf-tarjeta-img{ width:100%; height:100%; object-fit:contain; padding:12px 12px 8px; box-sizing:border-box; transition:transform .45s ease; }
.jf-tarjeta:hover .jf-tarjeta-img{ transform:scale(1.05); }
.jf-tarjeta-img-vacia{
width: 100%; height: 100%; background: var(--jf-surface-2);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
color: var(--jf-faint);
}
.jf-tarjeta-img-vacia span{ font-size: 11.5px; letter-spacing: .02em; }
.jf-vista-rapida{
position: absolute; left: 50%; bottom: 12px; z-index: 3;
transform: translate(-50%, 8px);
background: rgba(12,12,14,.88); color: #fff;
border: 1px solid var(--jf-border); border-radius: 6px;
padding: 7px 14px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
cursor: pointer; opacity: 0;
transition: opacity .18s ease, transform .18s ease, background .15s ease;
}
.jf-tarjeta:hover .jf-vista-rapida, .jf-vista-rapida:focus-visible{ opacity: 1; transform: translate(-50%, 0); }
.jf-vista-rapida:hover{ background: var(--jf-red); border-color: var(--jf-red); }
@media (hover: none){ .jf-vista-rapida{ display: none; } }
.jf-tarjeta-gx{ position:absolute; top:8px; left:8px; width:30px; height:30px; background:#fff; border-radius:4px; padding:3px; z-index:2; }
.jf-tarjeta-nuevo{ position:absolute; bottom:8px; left:8px; z-index:2; background:var(--jf-red); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:3px; }
.jf-fav{
position:absolute; top:8px; right:8px; z-index:2; background:rgba(255,255,255,.9); border:0; border-radius:50%;
width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#333; cursor:pointer;
}
.jf-fav:hover{ color:var(--jf-red); }
.jf-fav.is-activo{ color:var(--jf-red); }
.jf-fav.is-activo svg{ fill:currentColor; }
.jf-tarjeta-info{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:2px; flex:1; }
.jf-tarjeta-codigo{ font-family:ui-monospace,"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.05em; color:var(--jf-red-hover); margin:0; }
.jf-tarjeta-nombre{ font-size:13px; font-weight:700; color:var(--jf-text); margin:2px 0 0; line-height:1.25; }
.jf-tarjeta-compat{ font-size: 11px; color: var(--jf-muted); margin: 0 0 3px; }
.jf-tarjeta-micro{ display: flex; flex-wrap: wrap; gap: 5px 10px; list-style: none; margin: 4px 0 8px; padding: 0; }
.jf-micro{ display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--jf-muted); }
.jf-micro svg{ flex: none; color: var(--jf-muted); }
.jf-tarjeta-acciones{ display:flex; gap:6px; margin-top:auto; }
.jf-btn{
flex:1; text-align:center; padding:7px 6px; border-radius:4px; font-size:11.5px; font-weight:700;
text-decoration:none !important; transition:background .15s ease;
}
.jf-btn-ver{ background:var(--jf-surface-2); color:var(--jf-text) !important; border:1px solid var(--jf-border); }
.jf-btn-ver:hover{ background:#232326; }
.jf-btn-consultar{ background:var(--jf-red); color:#fff !important; }
.jf-btn-consultar:hover{ background:var(--jf-red-hover); }
.jf-btn-flecha{ display: inline-block; transition: transform .18s ease; }
.jf-btn-consultar:hover .jf-btn-flecha{ transform: translateX(4px); }

.jf-vista-lista .jf-tarjeta-inner{ flex-direction: row; }
.jf-vista-lista .jf-tarjeta-media{ flex: 0 0 140px; aspect-ratio: auto; }
.jf-vista-lista .jf-tarjeta-info{ flex: 1; }
.jf-vista-lista .jf-tarjeta-acciones{ max-width: 320px; }

.jf-skeleton{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.jf-skeleton-card{ aspect-ratio: 3 / 4; background: linear-gradient(90deg, var(--jf-surface) 25%, var(--jf-surface-2) 37%, var(--jf-surface) 63%); background-size: 400% 100%; border-radius: 8px; animation: jf-skeleton-brillo 1.4s ease infinite; }
@keyframes jf-skeleton-brillo{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

.jf-btn-cargar-mas{
display: block; width: 100%; margin: 24px 0 0; padding: 14px; background: var(--jf-surface);
border: 1px solid var(--jf-border); color: var(--jf-text); border-radius: 6px; cursor: pointer; font-weight: 600;
transition: border-color .15s ease;
}
.jf-btn-cargar-mas:hover{ border-color: var(--jf-red); }

.jf-sin-resultados{ text-align: center; padding: 40px 20px; color: var(--jf-muted); }

.jf-info-inferior{ display: flex; border-top: 1px solid var(--jf-border); margin-top: 20px; }
.jf-info-bloque{ flex: 1; text-align: center; padding: 32px 20px; border-left: 1px solid var(--jf-border); color: var(--jf-text); }
.jf-info-bloque:first-child{ border-left: 0; }
.jf-info-bloque svg, .jf-info-bloque img{ color: var(--jf-red-hover); margin: 0 auto 10px; display: block; }
.jf-info-bloque h3{ font-size: 15px; margin: 0 0 6px; }
.jf-info-bloque p{ font-size: 13px; color: var(--jf-muted); margin: 0; }
@media (max-width: 700px){
.jf-info-inferior{ flex-direction: column; }
.jf-info-bloque{ border-left: 0; border-top: 1px solid var(--jf-border); }
.jf-info-bloque:first-child{ border-top: 0; }
}

.jf-modal-fondo{
position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.jf-modal-fondo[hidden]{ display: none; }
.jf-modal{
background: var(--jf-surface); border: 1px solid var(--jf-border); border-radius: 10px;
max-width: 780px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative;
display: grid; grid-template-columns: 1fr 1fr;
}
.jf-modal-cerrar{
position: absolute; top: 10px; right: 10px; background: var(--jf-surface-2); border: 0; color: var(--jf-text);
width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; z-index: 2;
}
.jf-modal-img{ background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; }
.jf-modal-img img{ max-width: 100%; max-height: 340px; object-fit: contain; }
.jf-modal-info{ padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.jf-modal-info h2{ font-size: 20px; margin: 0 0 4px; color: var(--jf-text); }
.jf-modal-info .jf-tarjeta-codigo{ font-size: 14px; }
.jf-modal-info .jf-tarjeta-compat{ font-size: 13.5px; }
.jf-modal-desc{ font-size: 13.5px; color: var(--jf-muted); line-height: 1.5; margin: 6px 0 14px; }
.jf-modal-acciones{ display: flex; gap: 10px; margin-top: auto; }
@media (max-width: 640px){ .jf-modal{ grid-template-columns: 1fr; } }

/* ---------- Mobile: filtros en panel deslizante en vez de sidebar apilado ---------- */
@media (max-width: 900px){
	.jf-catalogo-layout{ flex-direction: column; }
	.jf-filtros-boton{ display: flex; }
	.jf-sidebar{
		position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 120;
		width: auto; max-height: 84vh; overflow-y: auto; box-sizing: border-box;
		border-radius: 16px 16px 0 0; border-bottom: 0;
		transform: translateY(100%);
		transition: transform .28s cubic-bezier(.2,.8,.2,1);
		box-shadow: 0 -18px 50px rgba(0,0,0,.6);
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}
	.jf-sidebar.jf-sheet-abierto{ transform: translateY(0); }
	.jf-sheet-fondo{
		display: block; position: fixed; inset: 0; z-index: 110;
		background: rgba(0,0,0,.6); opacity: 0; pointer-events: none;
		transition: opacity .28s ease;
	}
	.jf-sheet-fondo.jf-sheet-abierto{ opacity: 1; pointer-events: auto; }
	.jf-sheet-acciones{
		display: flex; gap: 10px; position: sticky; bottom: 0;
		background: var(--jf-surface); padding: 14px 0 2px; margin-top: 8px;
	}
	.jf-sheet-acciones .jf-btn{ min-height: 44px; display: flex; align-items: center; justify-content: center; }
	.jf-tarjeta-acciones .jf-btn{ min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
.jf-tarjeta, .jf-cat-item, .jf-skeleton-card{ transition: none !important; animation: none !important; }
}

@view-transition {
navigation: auto;
}
.jf-banner{ position: relative; }
.jf-banner-accent{
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--jf-wine), var(--jf-red), var(--jf-wine));
view-transition-name: jf-hero-luz;
}