/* v27 · La imagen y los estados siguen al scroll nativo. */
.hero.hx { height: 350svh; padding: 0; overflow: visible; }
.hx-pin { height: 100svh; min-height: 560px; }
.hx-media { mask-image: none; -webkit-mask-image: none; }
.hx-img img { object-fit: cover; }
.hx .hero-title { font-size: clamp(3.2rem, 7.3vw, 7rem); font-weight: 500; letter-spacing: -.06em; }
.hx-title { padding-top: 35px; }
.hx .hero-sub { font-size: clamp(.9rem, 1.15vw, 1.1rem); max-width: 37rem; }
.hx-shade { background: linear-gradient(180deg,#07100cc4,transparent 28%,transparent 60%,#07100ce6), radial-gradient(ellipse at center,rgba(7,16,12,var(--dim,.25)),transparent 80%); }
.hx-card { border-radius: 16px; background: #09130de8; box-shadow: 0 24px 70px -30px #0009; }
.hx-cap { bottom: 13svh; }
.hx-cap-fin { bottom: 15svh; }
.hx-cap-fin .btn { pointer-events: inherit; }
.hx-cap-fin:not([inert]) { pointer-events: auto; }
.hx-steps { right: var(--gut); top: auto; bottom: 66px; transform: none; flex-direction: row; gap: 26px; }
.hx-steps button { border: 0; border-top: 1px solid #e7ebd44d; padding: 12px 0 0; min-width: 85px; background: transparent; color: #adb7a9; text-align: left; font-size: .7rem; cursor: pointer; transition: color .3s,border-color .3s; }
.hx-steps button.on { color: #f1ebd4; border-color: #d8c495; }
.hx-steps button:hover { color: #fff; }
.hx-pin:not(.show-steps) .hx-steps { visibility: hidden; pointer-events: none; }
.hx-skip { position: absolute; left: var(--gut); bottom: 66px; display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; color: #e0e5d5; text-decoration: none; border-bottom: 1px solid #d7dec440; padding-bottom: 10px; }
.hx-skip .i { width: 15px; height: 15px; }
.hx-attrib { font-size: .55rem; bottom: 18px; color: #a8b4a3; }
.hx-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #b8c5a515; }
.hx-progress i { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(var(--hero-progress,0)); background: #d8c495; }
.hx-dot::after { animation: none; opacity: .4; transform: scale(2); border-width: 1px; }
.hx-scroll span { animation-duration: 2.4s; animation-iteration-count: 3; }

/* Una escena fija, tres capítulos; nunca se intercepta la rueda. */
.story-hint { display: none; }
@media(max-width:960px) { .nav .burger { margin-left: auto; } }
@media (min-width: 961px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .op.journey-section.scroll-story, .actors.perspective-section.scroll-story { height: 290svh; padding: 0; position: relative; overflow: visible; }
  .scroll-story > .story-pin { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; padding-bottom: 42px; }
  .scroll-story .journey-heading, .scroll-story .perspective-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px 10%; margin-bottom: 24px; max-width: none; }
  .scroll-story .journey-eyebrow, .scroll-story .perspective-eyebrow { grid-column: 1 / -1; }
  .scroll-story .journey-heading h2, .scroll-story .perspective-heading h2 { font-size: clamp(2.1rem,3.4vw,3.4rem); margin-top: 0; }
  .scroll-story .journey-heading > p:last-child, .scroll-story .perspective-heading > p:last-child { margin-top: 0; align-self: end; font-size: .85rem; max-width: 31rem; }
  .scroll-story .journey-tab { padding: 8px 0 16px; }
  .scroll-story .journey-tab b { font-size: 1.05rem; }
  .scroll-story .journey-tab small { font-size: .7rem; }
  .scroll-story .journey-track { margin-bottom: 18px; }
  .scroll-story .journey-context { padding: 16px 28px; }
  .scroll-story .journey-panel { min-height: 310px; padding: 28px 36px; }
  .scroll-story .journey-story h3 { font-size: clamp(1.5rem,2.4vw,2rem); }
  .scroll-story .journey-footnote, .scroll-story .perspective-footnote { font-size: .6rem; margin-top: 15px; }
  .scroll-story .perspective-nav { margin-bottom: 24px; padding-bottom: 15px; }
  .scroll-story .perspective-panel { min-height: 330px; }
  .scroll-story .story-hint { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; font-size: .6rem; letter-spacing: .06em; color: #a7b59f; }
  .story-hint > span:last-child { width: 100px; height: 1px; background: #d8c49530; }
  .story-hint i { display: block; height: 1px; background: #d8c495; transform-origin: left; transform: scaleX(var(--story-progress,0)); }
}
.journey-panel:not([hidden]) .journey-evidence, .perspective-panel:not([hidden]) .perspective-product { animation: sceneDetail .65s var(--ease) both; }
@keyframes sceneDetail { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@media(max-width:760px) {
  .hero.hx { height: 330svh; }
  .hx-pin { min-height: 560px; }
  .hx .hero-title { font-size: clamp(2.65rem,10.3vw,4.5rem); line-height: 1.06; }
  .hx .hero-sub { font-size: .9rem; line-height: 1.7; }
  .hx-title { padding-top: 0; }
  .hx-scroll { font-size: .58rem; margin-top: 32px; }
  .hx-media { width: max(100vw,142.85svh); }
  .hx-cap { bottom: 20svh; }
  .hx-cap h2 { font-size: 2.15rem; }
  .hx-cap-fin { bottom: 23svh; }
  .hx-cap-fin h2 { font-size: 2rem; }
  .hx-chips { gap: 6px; margin: 18px 0; }
  .hx-chips li { padding: 6px 10px; font-size: .68rem; }
  .hx-meta { font-size: .68rem; }
  .hx-skip { bottom: 68px; font-size: .6rem; }
  .hx-attrib { font-size: .47rem; max-width: calc(100vw - 44px); }
  .hx-steps { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .hero.hx { height: 100svh; min-height: 620px; }
  .hx-pin { height: 100%; min-height: 620px; }
  .hx-skip { bottom: 80px; }
  .hx-progress { display: none; }
  .journey-panel:not([hidden]) .journey-evidence, .perspective-panel:not([hidden]) .perspective-product { animation: none; }
}
@media(max-height:600px) and (prefers-reduced-motion:no-preference) {
  .hx-pin { min-height: 0; height: 100svh; }
  .hx-title { padding-top: 45px; }
  .hx .hero-title { font-size: clamp(2rem,5.6vw,3.5rem); }
  .hx .hero-sub { font-size: .72rem; line-height: 1.5; margin-top: 16px; max-width: 33rem; }
  .hx-scroll { display: none; }
  .hx-cap { bottom: 80px; width: min(340px,calc(100vw - 44px)); }
  .hx-k { font-size: .58rem; }
  .hx-cap h2 { font-size: 1.55rem; margin-top: 5px; }
  .hx-card { padding: 10px 14px; margin-top: 10px; }
  .hx-card-top b { font-size: .9rem; }
  .hx-card-sub,.hx-card dt { font-size: .65rem; }
  .hx-card dl { margin-top: 6px; padding-top: 6px; }
  .hx-card dl div:not(:last-child) { display: none; }
  .hx-price { font-size: 1rem; }
  .hx-meta { display: none; }
  .hx-cap-fin { width: min(600px,calc(100vw - 44px)); bottom: 75px; }
  .hx-chips { margin: 12px 0; gap: 5px; }
  .hx-chips li { font-size: .6rem; padding: 4px 8px; }
  .hx-cap-fin .btn { min-height: 36px; font-size: .7rem; padding: 6px 8px 6px 16px; }
  .hx-cap-fin .btn-ic { width: 27px; height: 27px; }
  .hx-skip { bottom: 35px; font-size: .55rem; }
  .hx-steps { bottom: 35px; }
  .hx-steps button { font-size: .55rem; padding-top: 5px; min-width: 65px; }
  .hx-attrib { font-size: .43rem; bottom: 8px; }
}