/* ============================================================
Home hero rediseno -- namespace propio .jf-home-hero__*
No redefine selectores globales (h1, img, button, section) ni toca
las reglas existentes de .jf-hero / .jf-hero-fallback-bg / #jf-hero-canvas.
============================================================ */

.jf-home-hero{ overflow:hidden; }

/* --- Transicion de luz hacia el catalogo (extremo emisor, el receptor ya
esta en implecode/product-listing.php / catalog.css del otro lado) --- */
@view-transition{
navigation:auto;
}
.jf-home-hero__luz{
position:absolute; top:0; left:0; right:0; height:3px; z-index:4;
background:linear-gradient(90deg, var(--jf-wine, var(--rojo)), var(--jf-red, var(--rojo-claro)), var(--jf-wine, var(--rojo)));
view-transition-name:jf-hero-luz;
}

/* --- Composicion visual (foto) --- */
.jf-home-hero__visual{
position:absolute; inset:0; z-index:1;
pointer-events:none;
will-change:transform;
}
.jf-home-hero__photo-wrap{
position:absolute; inset:0;
opacity:0;
transition:opacity .6s ease;
}
.jf-home-hero__photo{
display:block;
width:100%; height:100%;
object-fit:cover; object-position:center;
}
.jf-home-hero__visual.is-loaded .jf-home-hero__photo-wrap{ opacity:1; }

/* Scrim para legibilidad del texto sobre la foto del hero */
.jf-home-hero__visual::after{
content:""; position:absolute; inset:0; z-index:2;
background:linear-gradient(90deg, rgba(12,12,14,.88) 0%, rgba(12,12,14,.75) 65%, rgba(12,12,14,.35) 82%, rgba(12,12,14,.15) 92%, rgba(12,12,14,.6) 100%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 16%, #000 28%);
mask-image:linear-gradient(180deg, transparent 0%, transparent 16%, #000 28%);
}

/* --- Hotspots de repuestos (seccion 20 del brief) --- */
.jf-home-hero__hotspot{
position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer;
pointer-events:auto;
}
.jf-home-hero__hotspot-dot{
display:block; width:10px; height:10px; border-radius:50%;
background:var(--jf-red, var(--rojo));
box-shadow:0 0 0 4px rgba(193,39,45,.25);
transition:transform .2s ease, box-shadow .2s ease;
}
.jf-home-hero__hotspot:hover .jf-home-hero__hotspot-dot,
.jf-home-hero__hotspot:focus-visible .jf-home-hero__hotspot-dot{
transform:scale(1.3);
box-shadow:0 0 0 7px rgba(193,39,45,.35);
}
.jf-home-hero__hotspot::after{
content:attr(data-etiqueta);
position:absolute; left:50%; bottom:130%; transform:translateX(-50%) translateY(4px);
background:rgba(12,12,14,.92); color:#fff; font-family:var(--display);
font-size:11px; letter-spacing:.04em; text-transform:uppercase;
padding:4px 10px; border-radius:4px; white-space:nowrap;
opacity:0; pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
}
.jf-home-hero__hotspot:hover::after,
.jf-home-hero__hotspot:focus-visible::after{
opacity:1; transform:translateX(-50%) translateY(0);
}

/* Coordenadas por hotspot, recalibradas para la foto JF x GX Motor v2 (2026-09-18) */
.jf-home-hero__hotspot--iluminacion{ --x:45%; --y:37%; }
.jf-home-hero__hotspot--electrico{ --x:54%; --y:81%; }
.jf-home-hero__hotspot--motor{ --x:56%; --y:57%; }
.jf-home-hero__hotspot--frenos{ --x:42%; --y:65%; }
.jf-home-hero__hotspot--accesorios{ --x:74%; --y:35%; }

@media(max-width:1024px){
.jf-home-hero__hotspot--iluminacion{ --x:33%; --y:42%; }
.jf-home-hero__hotspot--electrico{ --x:30%; --y:66%; }
.jf-home-hero__hotspot--motor{ --x:48%; --y:53%; }
.jf-home-hero__hotspot--frenos{ --x:30%; --y:58%; }
.jf-home-hero__hotspot--accesorios{ --x:73%; --y:40%; }
}

@media(max-width:780px){
.jf-home-hero__hotspot--iluminacion{ --x:31%; --y:58%; }
.jf-home-hero__hotspot--electrico{ --x:41%; --y:77%; }
.jf-home-hero__hotspot--motor{ --x:50%; --y:65%; }
.jf-home-hero__hotspot--frenos{ --x:27%; --y:71%; }
.jf-home-hero__hotspot--accesorios{ --x:77%; --y:55%; }
}

/* --- Bloque izquierdo: copy comercial --- */
.jf-home-hero__content{ position:relative; z-index:3; max-width:560px; }

.jf-home-hero__eyebrow{
display:flex; align-items:center; gap:.7rem;
font-family:var(--display); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
color:#fff; margin:0 0 1rem;
}
.jf-home-hero__eyebrow-line{ width:32px; height:1px; background:#fff; opacity:.6; }

.jf-home-hero__title{ font-size:clamp(2.4rem,5vw,4rem); line-height:1.02; margin:0 0 1rem; }
.jf-home-hero__title-accent{ color:var(--jf-red, var(--rojo)); }

.jf-home-hero__subtitle{ color:var(--ink-dim); max-width:34ch; margin:0 0 1.75rem; }

.jf-home-hero__cta-arrow{ display:inline-block; transition:transform .2s cubic-bezier(.25,1,.5,1); }
.jf-home-hero__cta:hover .jf-home-hero__cta-arrow{ transform:translateX(5px); }

.jf-home-hero__indicadores{
list-style:none; display:flex; gap:1.75rem; margin:2rem 0 0; padding:0; flex-wrap:wrap;
}
.jf-home-hero__indicadores li{
display:flex; align-items:center; gap:.55rem; color:var(--ink-dim); font-size:12.5px;
}
.jf-home-hero__indicadores svg{ color:var(--jf-red, var(--rojo)); flex-shrink:0; }

.jf-home-hero__tagline{
margin:2.25rem 0 0; padding-top:1rem; border-top:1px solid rgba(255,255,255,.18);
font-family:var(--display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
color:#fff; line-height:1.6;
}
.jf-home-hero__tagline-accent{ color:var(--jf-red, var(--rojo)); }

/* --- Entrada del hero (seccion 12 del brief) --- */
@media (prefers-reduced-motion:no-preference){
.jf-home-hero__eyebrow,
.jf-home-hero__title,
.jf-home-hero__subtitle,
.jf-home-hero .jf-home-hero__cta,
.jf-home-hero__indicadores,
.jf-home-hero__tagline{
opacity:0; transform:translateY(14px);
animation:jf-home-hero-in .6s cubic-bezier(.25,1,.5,1) forwards;
}
.jf-home-hero__eyebrow{ animation-delay:220ms; }
.jf-home-hero__title{ animation-delay:320ms; }
.jf-home-hero__subtitle{ animation-delay:420ms; }
.jf-home-hero .jf-home-hero__cta{ animation-delay:480ms; }
.jf-home-hero__indicadores{ animation-delay:560ms; }
.jf-home-hero__tagline{ animation-delay:620ms; }
}
@keyframes jf-home-hero-in{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
.jf-home-hero__visual,
.jf-home-hero__hotspot-dot,
.jf-home-hero__cta-arrow{ transition:none !important; animation:none !important; }
}

/* --- Responsive: Mobile (prioridad: titulo > CTA > producto principal > repuestos > moto de fondo) --- */
@media (max-width:780px){
.jf-home-hero__visual{ opacity:.5; }
.jf-home-hero__hotspot{ display:none; }
.jf-home-hero__content{ max-width:none; }
.jf-home-hero__indicadores{ gap:1rem 1.5rem; }
.jf-home-hero__tagline{ margin-top:1.5rem; }
}