/* Hero inmersivo por scroll: escena fija + imágenes que se atraviesan (solo con JS activo) */
.journey-pin { position:relative; }
.journey-copy, .journey-rail, .journey-hint { display:none; }

.journey-on { --hh:96px; height:480svh; min-height:0; display:block; overflow:visible; }
.journey-on .journey-pin { position:sticky; top:var(--hh); height:calc(100svh - var(--hh)); overflow:hidden; display:grid; align-items:center; background:#090e18; isolation:isolate; }
.journey-on .journey-stage { position:absolute; inset:0; z-index:-2; }
.journey-on .journey-shot { position:absolute; inset:0; display:block; opacity:0; will-change:transform,opacity; }
.journey-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; animation:none; opacity:1; }
.journey-on .journey-shot:first-child { opacity:.85; }
.journey-on .journey-pin:after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#090e18f5 0%,#090e18d0 30%,#090e1880 58%,#090e1818 100%),linear-gradient(0deg,#090e18,transparent 28%); }
.journey-on .rubik-hero:after { display:none; }
.journey-on .hero-content, .journey-on .journey-copy { grid-area:1/1; width:100%; margin-inline:auto; }
.journey-on .hero-content { padding-block:48px; will-change:transform,opacity; }
.journey-on .journey-copy { display:block; opacity:0; visibility:hidden; padding-block:48px; will-change:transform,opacity; }
.journey-on .journey-copy.is-active { visibility:visible; }
.journey-on .journey-copy h2 { color:#fff; max-width:700px; margin:0 0 20px; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.08; letter-spacing:-.05em; text-wrap:balance; }
.journey-on .journey-copy p:not(.eyebrow) { color:#e1eaf9; max-width:540px; font-size:1.12rem; margin:0 0 28px; }
.journey-on .journey-copy .eyebrow { margin:0 0 22px; display:inline-flex; background:#a9d4ff08; border:1px solid #ffffff20; border-radius:7px; padding:8px 13px; letter-spacing:.12em; font-size:.74rem; }

.journey-on .journey-rail { display:flex; flex-direction:column; gap:12px; position:absolute; right:22px; top:50%; transform:translateY(-50%); margin:0; padding:0; list-style:none; z-index:2; }
.journey-rail li { width:4px; height:28px; border-radius:4px; background:#ffffff35; transition:background .3s,height .3s; }
.journey-rail li.is-on { background:#75f1bb; height:44px; }
.journey-on .hero-caption { z-index:2; }
.journey-on .journey-hint { display:flex; align-items:center; gap:10px; position:absolute; left:50%; bottom:20px; transform:translateX(-50%); color:#cfdef3; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; transition:opacity .3s; z-index:2; }
.journey-hint span { width:1px; height:26px; background:linear-gradient(#75f1bb,transparent); animation:journey-hint 1.6s ease-in-out infinite; }
.journey-hint.is-gone { opacity:0; }
@keyframes journey-hint { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

@media(max-width:767px) {
  .journey-on .hero-content, .journey-on .journey-copy { align-self:end; padding-block:24px 112px; }
  .journey-on .hero-content h1 { font-size:clamp(2.3rem,10.5vw,3.2rem); margin-bottom:16px; }
  .journey-on .hero-description { font-size:1rem; margin-bottom:20px; }
  .journey-on .hero-assurance, .journey-on .hero-platforms, .journey-on .hero-caption { display:none; }
  .journey-on .journey-pin:after { background:linear-gradient(0deg,#090e18 0%,#090e18e6 38%,#090e1855 66%,#090e1810 100%); }
  .journey-on .journey-rail { right:12px; }
  .journey-on .journey-copy h2 { font-size:clamp(1.9rem,8.5vw,2.6rem); }
  .journey-on .hero-actions .button-outline { display:none; }
  .journey-on .hero-actions .rubik-button { min-height:48px; }
}
@media(max-height:560px) and (orientation:landscape) { .journey-on .hero-description, .journey-on .hero-assurance, .journey-on .hero-platforms { display:none; } }

/* Sin JS, con movimiento reducido o ahorro de datos: hero estático de siempre */
.rubik-hero:not(.journey-on) .journey-pin { min-height:inherit; display:grid; align-items:center; }
.rubik-hero:not(.journey-on) .journey-shot:not(:first-child) { display:none; }
.rubik-hero:not(.journey-on) .hero-content { grid-area:1/1; width:100%; margin-inline:auto; }

/* Solo la etapa activa recibe toques y foco: las demás quedan invisibles pero estaban encima y los capturaban */
.journey-on .hero-content:not(.is-active), .journey-on .journey-copy:not(.is-active) { visibility:hidden; pointer-events:none; }
.journey-on .hero-content.is-active, .journey-on .journey-copy.is-active { visibility:visible; pointer-events:auto; z-index:1; }
.journey-on .journey-hint, .journey-on .journey-rail { pointer-events:none; }
.journey-on .hero-caption { pointer-events:none; }

/* Mobile: los botones quedan por encima del botón flotante de WhatsApp y de la barra "Cotizar" */
@media(max-width:767px) {
  .journey-on .hero-content, .journey-on .journey-copy { padding-block:24px 192px; }
}
@media(max-width:767px) and (max-height:720px) {
  .journey-on .hero-description { display:none; }
  .journey-on .journey-copy p:not(.eyebrow) { font-size:.95rem; margin-bottom:18px; }
}
