/* Hero da home: V5 (versions/v5-walkthrough) com o CSS restrito a #journey para não vazar no resto da página.
   Diferença em relação à V5: degradê escuro da esquerda para a direita atrás do texto (leitura). */
#journey { height: 720svh; font-family: 'DM Sans', sans-serif; color: #fff8e9; }
#journey button { font: inherit; color: inherit; cursor: pointer; }
#journey .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #050a14; }
#journey #view, #journey .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
#journey #view { opacity: 1; overflow: hidden; }
#journey #render { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; will-change: transform; }
#journey .render-frame { position: absolute; inset: 0; width: 1672px; height: 941px; opacity: 0; pointer-events: none; }
#journey #frame-arrival { opacity: 1; }
#journey #tvVideo { position: absolute; left: 0; top: 0; width: 1000px; height: 562.5px; transform-origin: 0 0; object-fit: fill; opacity: 0; pointer-events: none; background: #000; }

/* leitura: degradê da esquerda (opaco) para a direita (transparente), mais a faixa de cima e de baixo da V5 */
#journey .shade { pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 10, 20, .92) 0%, rgba(5, 10, 20, .72) 26%, rgba(5, 10, 20, .3) 52%, rgba(5, 10, 20, .12) 72%, rgba(5, 10, 20, .4) 100%),
    linear-gradient(0deg, #050a14 0%, rgba(5, 10, 20, .55) 12%, transparent 34%),
    linear-gradient(180deg, rgba(5, 10, 20, .4), transparent 18%); }
/* tom azul-marinho sobre a foto, como no hero da landing do curso: os elementos ficam direto sobre o fundo, sem barra */
#journey .shade::before { content: ""; position: absolute; inset: 0; background: rgba(12, 40, 92, .18); mix-blend-mode: color; }
#journey .shade::after { content: ""; position: absolute; inset: 0; background: rgba(5, 14, 32, .16); mix-blend-mode: multiply; }

#journey .copy { position: absolute; left: clamp(16px, 4vw, 56px); top: 18%; pointer-events: none; max-width: 540px; text-shadow: 0 2px 20px #0008; }
#journey .copy > span { font-size: 11px; letter-spacing: .2em; color: #e7b765; }
#journey h1 { font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: -.045em; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.02; margin: 18px 0; font-stretch: normal; }
#journey em { font-family: Italiana, Georgia, serif; font-weight: 400; font-style: normal; color: #e7b765; }
#journey .copy p { font-family: var(--texto, 'DM Sans', sans-serif); font-size: 16px; line-height: 1.7; max-width: 400px; color: #eef2f8; margin: 0; }

#journey aside { position: absolute; right: 4%; bottom: 10%; width: 275px; padding: 17px 20px; background: rgba(9, 17, 32, .82);
  border: 1px solid rgba(120, 165, 230, .22); border-radius: 12px; backdrop-filter: blur(20px); box-shadow: 0 12px 50px #0003; }
#journey .panel-heading { display: flex; align-items: center; gap: 8px; font-size: 8px; letter-spacing: .13em; padding-bottom: 13px; }
#journey .panel-heading > span:last-child { margin-left: auto; color: #e7b765; }
#journey .live { width: 5px; height: 5px; background: #e7b765; border-radius: 50%; }
#journey .row { display: flex; border-radius: 0; background: none; transition: none; justify-content: space-between; padding: 9px 0; border-top: 1px solid #ffffff13; font-size: 10px; color: #9aa8bf; gap: 8px; }
#journey .row strong { color: #eef2f8; font-weight: 400; display: flex; align-items: center; gap: 6px; }
#journey .row.active { background: none; }
#journey .row.active, #journey .row.active strong { color: #e7b765; }
#journey #swatch { height: 8px; width: 8px; border-radius: 50%; background: #c7b798; }
#journey .steps { display: flex; gap: 7px; margin-top: 15px; }
#journey .steps button { border: 1px solid #ffffff25; background: transparent; border-radius: 50%; width: 31px; height: 31px; font-size: 9px; }
#journey .steps button[aria-current] { background: #e7b765; color: #1d1609; }
#journey #playTV { background: transparent; border: 1px solid #e7b765; width: 100%; margin-top: 14px; padding: 8px; font-size: 10px; }
#journey footer { position: absolute; bottom: 23px; left: 4%; right: 4%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; font-size: 8px; letter-spacing: .14em; }
#journey footer > span:last-child { justify-self: end; }
#journey footer b { display: block; text-align: center; font-size: 22px; margin-top: 8px; }
#journey .progress { position: absolute; top: auto; right: auto; bottom: 0; left: 0; display: block; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: #e7b765; z-index: auto; }
#journey :focus-visible { outline: 2px solid #e7b765; outline-offset: 4px; }

@media (min-width: 651px) { #journey .stage[data-chapter="4"] aside { right: auto; left: clamp(440px, 30%, 560px); } }
@media (max-width: 650px) {
  #journey #view { top: 0; height: 64%; }
  #journey .copy { top: 11%; left: 5%; max-width: 300px; }
  #journey .copy h1 { font-size: 30px; margin: 8px 0; }
  #journey .copy p { display: none; }
  #journey .copy > span { font-size: 8px; }
  #journey aside { bottom: 5%; padding: 12px 16px; width: auto; left: 5%; right: 5%; }
  #journey .row { padding: 6px 0; font-size: 9px; }
  #journey .panel-heading { padding-bottom: 7px; }
  #journey .steps { margin-top: 8px; }
  #journey .steps button { width: 27px; height: 27px; }
  #journey footer { bottom: 10px; font-size: 6px; }
  #journey footer > span:first-child { max-width: 90px; }
  #journey footer b { display: none; }
  #journey .shade { background: linear-gradient(180deg, rgba(5, 10, 20, .78) 0%, rgba(5, 10, 20, .45) 22%, transparent 36%, transparent 50%, #050a14 64%); }
}
@media (prefers-reduced-motion: reduce) { #journey { height: 100svh; } #journey .stage { position: relative; } #journey .steps { display: none; } }