/* Home Test Drive: 5 capítulos. Estado de repouso completo sem JS. */
.rotulo-capitulo { display: flex; gap: var(--e-2); font-size: var(--t-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave, var(--c-concreto)); }
.rotulo-capitulo span { font-family: var(--font-data); color: var(--c-pinca); letter-spacing: 0; }
.papel .rotulo-capitulo span { color: var(--c-tinta); }

.capitulo { position: relative; scroll-margin-top: var(--h-topo); }
.ponte { padding-block: var(--e-7); font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-concreto); font-style: normal; }

/* 01 Chegada */
/* Desktop: texto à esquerda no asfalto, foto vertical à direita. Texto nunca sobre a foto. */
.chegada { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); overflow: hidden; }
.chegada::after { display: none; }
.chegada-foto { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; overflow: hidden; }
.chegada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.chegada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--c-asfalto) 0%, rgba(18, 18, 18, 0) 22%); pointer-events: none; }
.chegada-texto {
  grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 1;
  display: grid; gap: var(--e-4); justify-items: start;
  padding: calc(120px + env(safe-area-inset-top, 0px)) var(--e-5) var(--e-7) max(var(--margem), calc((100vw - var(--largura-max)) / 2 + var(--margem)));
}
.chegada-texto h1 { max-width: 12ch; font-size: clamp(2.75rem, 1rem + 4.6vw, 6.25rem); }
@media (max-width: 900px) {
  .chegada { grid-template-columns: 1fr; min-height: 0; }
  .chegada-foto { grid-column: 1; height: min(78svh, 125vw); }
  .chegada-foto::after { background: linear-gradient(to top, var(--c-asfalto) 0%, rgba(18, 18, 18, 0) 30%); }
  .chegada-texto { grid-row: 2; padding: var(--e-4) var(--margem) var(--e-7); }
}
.chegada-texto .texto-l { max-width: 46ch; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.acoes .link { min-height: var(--alvo); display: inline-flex; align-items: center; }

/* Faixa de marquees */
.faixa { display: grid; gap: var(--e-2); padding-block: var(--e-4); border-block: 1px solid var(--c-linha-escuro); overflow: hidden; }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-trilho { display: inline-flex; gap: var(--e-6); padding-right: var(--e-6); font-family: var(--font-display); font-size: var(--t-h2); }
.marquee-volta .marquee-trilho { color: var(--c-concreto); font-family: var(--font-body); font-size: var(--t-body-l); font-weight: 500; }

/* 02 Alto padrão */
.alto { padding-block: var(--secao-luxo) 0; }
.alto-cabecalho { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
.cenas { position: relative; }
.cena { position: relative; min-height: 100dvh; display: grid; align-items: end; overflow: hidden; }
.cena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cena-texto { position: relative; z-index: 1; display: grid; gap: var(--e-3); justify-items: start; padding-block: var(--e-7); }
.cena-dados { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: baseline; }
.cena-preco { font-family: var(--font-display); font-size: var(--t-h2); }
.cena-contador { font-family: var(--font-data); color: var(--texto-suave, var(--c-concreto)); }
.alto-final { padding-block: var(--e-6) var(--secao-luxo); }

/* 03 Repasse */
.repasse { padding-block: var(--secao-luxo); }
.repasse-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-6); align-items: end; margin-bottom: var(--e-6); }
.repasse-grade > div { display: grid; gap: var(--e-3); }
.repasse-final { padding-top: var(--e-5); }
@media (max-width: 900px) { .repasse-grade { grid-template-columns: 1fr; } }

/* 04 Procedência */
.procedencia { padding-block: var(--secao-luxo); overflow: hidden; }
.procedencia-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; }
.procedencia-k { position: relative; aspect-ratio: 1; display: grid; place-items: center; color: var(--c-creme); touch-action: pan-y; }
.procedencia-k .marca-k { width: 62%; }
.procedencia-k canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.procedencia-k canvas:active { cursor: grabbing; }
.procedencia-texto { display: grid; gap: var(--e-4); }
.compromissos-home { list-style: none; display: grid; gap: var(--e-4); counter-reset: none; }
.compromissos-home li { border-top: 1px solid var(--c-linha-escuro); padding-top: var(--e-3); display: grid; gap: var(--e-1); }
@media (max-width: 900px) {
  .procedencia-grade { grid-template-columns: 1fr; }
  .procedencia-k { max-width: 420px; width: 100%; margin-inline: auto; }
}

/* 05 Sua vez */
.sua-vez { min-height: 100dvh; display: grid; align-items: end; overflow: hidden; }
.sua-vez-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.85); }
.sua-vez::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to right, rgba(18, 18, 18, .75) 0%, rgba(18, 18, 18, .2) 60%, rgba(18, 18, 18, 0) 100%); }
.sua-vez-grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-6); align-items: end; padding-block: var(--e-8) var(--e-7); }
.sua-vez-texto { display: grid; gap: var(--e-4); justify-items: start; }
.sua-vez-lado { display: grid; gap: var(--e-2); border-top: 1px solid rgba(237, 228, 211, .3); padding-top: var(--e-3); }
.sua-vez-lado .link { justify-self: start; min-height: var(--alvo); display: inline-flex; align-items: center; }
@media (max-width: 900px) { .sua-vez-grade { grid-template-columns: 1fr; } }

/* Indicador de capítulos */
.indicador { position: fixed; z-index: 30; right: calc(var(--e-4) + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.indicador ol { list-style: none; display: grid; gap: var(--e-1); padding: var(--e-1) var(--e-2); background: rgba(18, 18, 18, .62); border-radius: var(--raio); }
.indicador.no-papel ol { background: rgba(237, 228, 211, .8); }
.indicador a { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-2); min-height: var(--alvo); min-width: var(--alvo); text-decoration: none; color: var(--c-concreto); font-size: var(--t-small); }
.indicador-num { font-family: var(--font-data); }
.indicador { transition: opacity .3s var(--entrar), visibility .3s; }
.indicador.fora { opacity: 0; visibility: hidden; }
.indicador a { position: relative; }
.indicador-nome {
  position: absolute; right: calc(100% + var(--e-2)); white-space: nowrap; padding: var(--e-1) var(--e-2);
  background: var(--c-grafite); color: var(--c-creme); border-radius: var(--raio);
  opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .3s var(--entrar), transform .3s var(--entrar);
}
.indicador a:hover .indicador-nome, .indicador a:focus-visible .indicador-nome { opacity: 1; transform: none; }
.indicador a[aria-current="step"]::after { content: ""; position: absolute; right: -6px; top: 50%; width: 2px; height: 18px; transform: translateY(-50%); background: var(--c-pinca); }
.indicador.no-papel a[aria-current="step"]::after { background: var(--c-tinta); }
@media (min-width: 961px) { .home main .container, .home .chegada-texto { padding-right: max(var(--margem), 88px); } }
.indicador a[aria-current="step"] { color: var(--c-creme); }
.indicador a[aria-current="step"] .indicador-num { color: var(--c-pinca); }
.indicador.no-papel a { color: var(--c-tinta-suave); }
.indicador.no-papel a[aria-current="step"] { color: var(--c-tinta); }
.indicador.no-papel a[aria-current="step"] .indicador-num { color: var(--c-tinta); }
.indicador-final { display: none !important; }
@media (max-width: 960px) {
  .indicador { top: auto; bottom: auto; right: auto; left: 0; top: calc(64px + env(safe-area-inset-top, 0px)); transform: none; width: 100%; }
  .indicador ol { display: none; }
  .indicador .indicador-final {
    display: inline-flex !important; position: fixed; left: var(--margem); bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
    min-height: var(--alvo); padding: 0 var(--e-3); background: var(--c-grafite); color: var(--c-creme); border-radius: var(--raio);
  }
}
.barra-progresso { position: fixed; z-index: 41; inset: 0 0 auto 0; height: 2px; background: var(--c-pinca); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }