/* Showcase layer for the certificate journey (home pages only). v2, 2026-11-02 (Ramón: simpler, faster, clear steps,
   use the real redemption statement). Dark band, a rail that fills as you read, one step per stretch of scroll, step
   buttons under the drawing, and in step 5 the real redemption statement with its QR highlighted.
   Cheap to draw: no animated blur, no filters, nothing moves while nobody scrolls (only the turbine and the cable).
   Undo: remove this file's <link> and showcase.js's <script> from principal.html / index.html. */
.home .journey { position: relative; isolation: isolate; overflow: clip; background: #0b1d14; color: #e7f1ec; }
.home .journey::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 15% 20%, rgba(72, 188, 172, .16), transparent 70%),
    radial-gradient(45% 40% at 85% 85%, rgba(31, 122, 110, .22), transparent 70%);
}
.home .journey .kicker { color: #9ff0e2; }
.home .journey .sec-title { color: #fff; }
.home .journey .sec-intro { color: rgba(231, 241, 236, .72); }
.home .journey .journey-actions .text-link { color: #9ff0e2; }
.home .journey .journey-actions .text-link:hover { color: #fff; }

/* the drawing */
.jx-card { position: relative; border-radius: 27px; padding: 1px; background: linear-gradient(160deg, rgba(159, 240, 226, .45), rgba(72, 188, 172, .08) 45%, rgba(72, 188, 172, .3)); }
.jx-card .journey-art { position: relative; border-radius: 26px; box-shadow: 0 40px 80px -45px rgba(0, 0, 0, .85); }
/* the drawn statement of step 5 gives way to the real one */
.jx-card .j-s5 { display: none; }
.jx-doc {
  position: absolute; left: 50.5%; top: 8%; width: 44%; aspect-ratio: 1000 / 1414; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .75); opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .1, 1); pointer-events: none;
}
.jx-doc img { display: block; width: 100%; height: 100%; }
.jx-doc i { position: absolute; border: 2px solid #48bcac; border-radius: 4px; opacity: 0; transition: opacity .4s ease .5s; box-shadow: 0 0 0 3px rgba(72, 188, 172, .18); }
.jx-doc .jx-hl-name { left: 38%; top: 17.6%; width: 24%; height: 4%; }
.jx-doc .jx-hl-qr { left: 81.5%; top: 86.5%; width: 17.5%; height: 12.8%; }
.jx-check {
  position: absolute; right: 3%; top: 4%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #48bcac; display: grid; place-items: center;
  box-shadow: 0 0 0 5px rgba(72, 188, 172, .18); opacity: 0; transform: scale(.5); transition: opacity .35s ease .6s, transform .45s cubic-bezier(.3, 1.5, .5, 1) .6s; pointer-events: none;
}
.jx-check svg { width: 52%; height: 52%; }
.journey-stage.s5 .jx-doc { opacity: 1; transform: none; }
.journey-stage.s5 .jx-doc i, .journey-stage.s5 .jx-check { opacity: 1; transform: none; }

/* the drawing's motion (v3): turbines, slow sun rays, drifting clouds, energy along the cable and lines, town lights */
.journey-art .j-blades { animation: j-spin 4.5s linear infinite; }
.journey-art .j-blades.j-slow { animation-duration: 6.5s; }
.journey-art .j-rays { transform-box: fill-box; transform-origin: center; animation: j-spin 70s linear infinite; }
.journey-art .j-sunglow { transform-box: fill-box; transform-origin: center; animation: j-glow 5s ease-in-out infinite; }
.journey-art .j-cloud { animation: jx-drift 38s ease-in-out infinite alternate; }
@keyframes jx-drift { to { transform: translateX(34px); } }
.journey-art .j-pulse { stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: jx-flow 2.6s linear infinite; }
.journey-art .j-pulse.p2 { animation-delay: -1.3s; }
@keyframes jx-flow { to { stroke-dashoffset: 0; } }
.journey-art .j-win { fill: #2a4a3c; transition: fill .6s ease; }
.journey-stage.s2 .journey-art .j-win { fill: #ffd978; }
.journey-stage.s2 .journey-art .j-win:nth-child(3n) { transition-delay: .25s; }
.journey-stage.s2 .journey-art .j-win:nth-child(3n+1) { transition-delay: .5s; }
.journey-stage.s2 .journey-art .j-win:nth-child(4n) { fill: #2a4a3c; }
.journey-art .j-card { transform-box: fill-box; transform-origin: center; }
.journey-stage .journey-art .j-s3 { transform: translateY(14px) scale(.96); transform-box: fill-box; transform-origin: center; }
.journey-stage.s3 .journey-art .j-s3 { transform: none; }

.journey-stage.s4:not(.s5) .journey-art .j-stamp { animation: jx-stamp .5s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes jx-stamp { from { opacity: 0; transform: translate(404px, 268px) rotate(-10deg) scale(1.7); } 70% { opacity: 1; transform: translate(404px, 268px) rotate(-10deg) scale(.94); } to { opacity: 1; transform: translate(404px, 268px) rotate(-10deg) scale(1); } }

/* step buttons under the drawing */
.home .journey .journey-dots { display: none; }
.jx-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.jx-nav .jx-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #e7f1ec; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s; }
.jx-nav .jx-arrow:hover { background: rgba(255, 255, 255, .08); border-color: rgba(159, 240, 226, .5); }
.jx-nav .jx-arrow:disabled { opacity: .3; cursor: default; }
.jx-nav .jx-arrow svg { width: 14px; height: 14px; }
.jx-segs { display: flex; gap: 6px; }
.jx-segs button { width: 30px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.jx-segs button::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); transition: background-color .3s; }
.jx-segs button.is-done::before { background: #48bcac; }
.jx-segs button.is-on::before { background: #9ff0e2; }
.jx-segs button:focus-visible { outline: 2px solid #9ff0e2; outline-offset: 2px; border-radius: 4px; }
.jx-caption { text-align: center; margin: 8px 0 0; font-size: 14px; color: rgba(231, 241, 236, .62); min-height: 1.5em; }
.jx-caption b { color: #fff; font-weight: 700; }

/* the steps: one per stretch of scroll, a rail that fills, the current one lit */
.home .journey .journey-steps { position: relative; }
.jx-rail { position: absolute; left: 19px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .09); pointer-events: none; }
.jx-rail i { position: absolute; inset: 0; border-radius: 2px; transform-origin: top; transform: scaleY(var(--jx-p, 0)); background: linear-gradient(#9ff0e2, #48bcac 60%, #1f7a6e); }
.home .journey .journey-step { opacity: 1; position: relative; min-height: 34vh; padding-top: 0; }
.home .journey .journey-step:first-child { padding-top: 0; }
.home .journey .journey-step:last-child { min-height: 30vh; }
.home .journey .journey-step > div {
  position: relative; padding: 18px 22px 20px; border-radius: 18px; cursor: pointer;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06);
  opacity: .45; transition: background-color .4s, border-color .4s, opacity .4s;
}
.home .journey .journey-step.is-done > div { opacity: .6; }
.home .journey .journey-step.is-active > div { opacity: 1; cursor: default; background: rgba(255, 255, 255, .055); border-color: rgba(72, 188, 172, .35); }
.home .journey .journey-step h3 { color: #fff; margin-top: 0; }
.home .journey .journey-step p { color: rgba(231, 241, 236, .72); }
.home .journey .journey-n { position: relative; z-index: 1; background: #10261b; color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .3s, color .3s; }
.home .journey .journey-step.is-done .journey-n { background: #1f7a6e; color: #fff; border-color: transparent; }
.home .journey .journey-step.is-active .journey-n { background: #48bcac; color: #0e2218; border-color: transparent; box-shadow: 0 0 0 6px rgba(72, 188, 172, .14); }

@media (max-width: 991px) {
  .home .journey .journey-stage { background: #0b1d14; box-shadow: 0 0 0 100vmax #0b1d14; }
  .jx-card { max-width: 460px; margin: 0 auto; }
  .jx-card .journey-art { max-width: none; }
  .jx-nav { margin-top: 10px; gap: 10px; }
  .jx-caption { margin-top: 4px; font-size: 13px; }
  .home .journey .journey-step { min-height: 32vh; }
  .home .journey .journey-step:last-child { min-height: 26vh; }
  .home .journey .journey-step > div { padding: 14px 16px 16px; }
}
@media (max-width: 575px) { .jx-card { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .journey-art .j-blades, .journey-art .j-rays, .journey-art .j-sunglow, .journey-art .j-cloud, .journey-art .j-pulse { animation: none !important; }
  .journey-art .j-pulse { stroke-dasharray: none; opacity: .5; }
  .jx-doc, .jx-doc i, .jx-check, .home .journey .journey-step > div { transition: none; }
}