/* =============================================================
   MEGA BAZAR · Direto da Fábrica AERO
   3 cores fixas: Areia, Grafite, Linho. Regras em DESIGN.md
   ============================================================= */
:root {
  --areia: #EFE8DD;
  --grafite: #1A1714;
  --linho: #FBF8F3;

  --bg: var(--areia);
  --ink: var(--grafite);
  --paper: var(--linho);

  --m: 20px;
  --gap: clamp(80px, 9vw, 150px);

  --t-h2: clamp(42px, 7vw, 104px);
  --t-big: clamp(20px, 1.8vw, 26px);
  --t-note: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 900px) { :root { --m: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wdth" 100;
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, figure, fieldset, legend { margin: 0; padding: 0; border: 0; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.kiosk :focus-visible, .foot :focus-visible { outline-color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* ---------- botões ---------- */
.btn {
  --b: var(--ink); --f: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: 0 28px;
  background: var(--b); color: var(--f); border: 0; border-radius: 0;
  font: inherit; font-weight: 600; font-size: 17px; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: .86; } }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--light { --b: var(--paper); --f: var(--ink); }
.btn--line { --b: transparent; --f: var(--paper); border: 2px solid var(--paper); }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { --b: var(--paper); --f: var(--ink); opacity: 1; } }
.btn--ghost { --b: transparent; --f: var(--paper); padding: 0 14px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- navegação ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--m); background: var(--bg);
  transition: transform 400ms var(--ease-drawer);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.nav__brand img { height: 30px; width: auto; }
.nav__sub { font-size: 12.5px; line-height: 1.15; font-weight: 600; letter-spacing: .01em; padding-left: 12px; box-shadow: inset 2px 0 0 var(--ink); } /* taste-skill-ignore: divisor da marca */
.nav__links { display: none; gap: 32px; font-size: 15px; }
.nav__links a { text-decoration: none; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
@media (min-width: 760px) { .nav__links { display: flex; } .nav__brand img { height: 34px; } }

/* =============== PRIMEIRA TELA =============== */
.gate {
  padding: 78px var(--m) 56px;
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr);
}
.gate > * { min-width: 0; }
.gate__title {
  font-size: clamp(54px, 15vw, 150px); font-weight: 700; font-variation-settings: "wdth" 112;
  line-height: .9; letter-spacing: -0.04em;
}
.gate__lead { font-size: var(--t-big); line-height: 1.35; max-width: 30rem; }
.gate__when { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.dot { width: 6px; height: 6px; background: var(--ink); border-radius: 50%; }
.gate__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: clamp(17px, 4.4vw, 26px); font-weight: 700; font-variation-settings: "wdth" 108; letter-spacing: -0.01em; }
.gate__sub img { height: 1.05em; width: auto; }

/* foto da Drawstring Bag no cabide: entra com cortina, respira devagar e inclina com o mouse */
.bag3d { position: relative; margin: 0; perspective: 900px; }
.bag3d__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease-out); box-shadow: 0 30px 60px -30px rgba(26, 23, 20, .45); }
.bag3d__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform-origin: 50% 20%; animation: bagBreath 9s ease-in-out infinite; }
.js .bag3d__frame { clip-path: inset(100% 0 0 0); }
.is-ready .bag3d__frame { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-io) 250ms, transform 600ms var(--ease-out); }
.bag3d__tag { position: absolute; z-index: 2; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; padding: 5px 10px; }
/* a bag balança de leve no cabide (zoom + giro pequeno a partir do gancho) */
@keyframes bagBreath { 0%, 100% { transform: scale(1.04) rotate(-0.8deg); } 50% { transform: scale(1.09) rotate(0.8deg); } }

/* celular: título à esquerda, mochila à direita, inscrição logo embaixo */
@media (max-width: 979px) {
  .gate__copy { display: grid; grid-template-columns: minmax(0, 1fr) 40vw; column-gap: 8px; row-gap: 14px; align-items: center; }
  .gate__head { grid-column: 1; grid-row: 1; }
  .gate__title { font-size: clamp(50px, 14.5vw, 96px); }
  .bag3d { grid-column: 2; grid-row: 1 / span 2; margin-right: -8px; }
  .gate__lead, .gate__when { grid-column: 1 / -1; }
  .gate__lead { grid-row: 3; }
  .gate__when { grid-row: 4; }
  .bag3d__tag { font-size: 10.5px; padding: 4px 7px; white-space: normal; width: max-content; max-width: 100%; text-align: center; }
  .gate__sub { font-size: 15px; gap: 7px; flex-wrap: nowrap; white-space: nowrap; }
}

@media (min-width: 980px) {
  .gate {
    min-height: 100svh; padding-top: 104px; padding-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
    align-items: center; column-gap: clamp(40px, 5vw, 96px);
  }
  .gate__copy { display: grid; gap: 26px; align-content: center; }
  .gate__title { font-size: clamp(88px, 9.5vw, 168px); }
  /* computador: mochila ao lado do título, tudo na primeira tela */
  .gate__copy { grid-template-columns: minmax(0, 1fr) clamp(240px, 23vw, 380px); column-gap: 12px; }
  .gate__head { grid-column: 1; grid-row: 1; }
  .bag3d { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .gate__lead { grid-column: 1; grid-row: 2; }
  .gate__when { grid-column: 1; grid-row: 3; }
}

/* ---------- painel (kiosk) ---------- */
.kiosk {
  --k-line: rgba(251, 248, 243, .12);
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--paper);
  padding: 20px 16px 22px; margin: 0 -8px;
  display: grid; gap: 18px;
  overflow: hidden;
}
@media (min-width: 560px) { .kiosk { margin: 0; padding: 26px 26px 28px; } }
/* luz que corre pela borda */
.kiosk::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(251,248,243,.9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 6s linear infinite;
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-border { to { --a: 360deg; } }
.kiosk__glow {
  position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: 15%; top: -40%;
  background: radial-gradient(closest-side, rgba(251,248,243,.10), transparent);
  pointer-events: none;
}
.kiosk__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.kiosk__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.kiosk__brand img { width: auto; height: 22px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 0 rgba(251,248,243,.6); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(251,248,243,.55); } 100% { box-shadow: 0 0 0 10px rgba(251,248,243,0); } }

/* contador: números normais que rolam (odômetro) */
.count { display: grid; gap: 8px; }
.count__label { font-size: 15px; font-weight: 600; opacity: .75; }
.count__row { display: flex; align-items: flex-end; gap: 14px; }
.count__unit { font-size: clamp(22px, 5vw, 30px); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.02em; padding-bottom: .55em; }
.odo {
  --h: clamp(76px, 22vw, 116px);
  display: flex; height: var(--h); overflow: hidden;
  font-size: var(--h); line-height: 1; font-weight: 800; font-variation-settings: "wdth" 112;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.odo__col { display: block; height: var(--h); overflow: hidden; position: relative; }
.odo__strip { display: flex; flex-direction: column; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--dl, 0ms); will-change: transform; }
.odo__strip span { display: block; height: var(--h); line-height: var(--h); text-align: center; }
/* luz que passa pelo número */
.odo { position: relative; }
.odo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(26,23,20,.55) 50%, transparent 65%);
  mix-blend-mode: multiply; transform: translateX(-120%);
  animation: odo-sheen 4.5s var(--ease-io) infinite 2s;
}
@keyframes odo-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.odo.is-bump .odo__col:last-child { animation: bump 600ms var(--ease-out); }
@keyframes bump { 30% { transform: translateY(-6%); } }
.meter { position: relative; height: 4px; background: rgba(251,248,243,.12); overflow: hidden; }
.meter__fill { position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(1); transition: transform 1.4s var(--ease-out); }
.meter__fill::after { content: ""; position: absolute; right: 0; top: -3px; width: 40px; height: 10px; background: radial-gradient(closest-side, rgba(251,248,243,.9), transparent); }
.count__small { font-size: 13px; opacity: .7; }

/* trajeto do avião */
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.route__line { position: relative; height: 26px; }
.route__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(251,248,243,.22); } /* taste-skill-ignore: rota tracejada do avião */
.route__fill { position: absolute; left: 0; top: calc(50% - 1px); height: 2px; width: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); transition: transform 800ms var(--ease-io); }
.route__plane { position: absolute; top: 50%; left: 0; height: 26px; width: auto; transform: translate(-50%, -50%) rotate(90deg); transition: left 800ms var(--ease-io); filter: drop-shadow(0 0 6px rgba(251,248,243,.5)); }

/* passos */
.steps { display: grid; gap: 16px; }
.steps__count { font-size: 13px; opacity: .65; font-variant-numeric: tabular-nums; }
.step { display: none; }
.step.is-active { display: grid; gap: 12px; animation: step-in 520ms var(--ease-out) both; }
.step.is-back { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.step__q { font-size: clamp(28px, 7vw, 40px); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.03em; line-height: 1.05; }
.step__hint { font-size: 14px; opacity: .7; }
.big-input, .mid-input {
  width: 100%; background: transparent; color: var(--paper);
  border: 0; border-bottom: 2px solid rgba(251,248,243,.3); border-radius: 0;
  font: inherit; caret-color: var(--paper);
  transition: border-color 200ms ease;
  -webkit-appearance: none; appearance: none;
}
.big-input { font-size: clamp(24px, 6vw, 32px); font-weight: 600; padding: 10px 0 12px; }
.mid-input { font-size: 20px; padding: 8px 0 10px; }
.big-input::placeholder, .mid-input::placeholder { color: rgba(251,248,243,.6); }
.big-input:focus, .mid-input:focus { outline: none; border-bottom-color: var(--paper); }
.big-input[aria-invalid="true"], .mid-input[aria-invalid="true"] { border-bottom-color: #e8a27c; }
.mini-fields { display: grid; gap: 16px; }
.mini-fields label { display: block; font-size: 14px; font-weight: 600; }
@media (min-width: 560px) { .mini-fields { grid-template-columns: 1fr 1fr; } }
.summary { font-size: 20px; font-weight: 600; line-height: 1.35; }
.field__err { font-size: 14px; color: #f0c2a6; }
.field__err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo-armadilha */
.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 15px; cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 26px; height: 26px; background: transparent; border: 2px solid rgba(251,248,243,.6); border-radius: 0; cursor: pointer;
  display: grid; place-content: center; transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.check input::after { content: ""; width: 12px; height: 7px; border: solid var(--ink); border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(.6); opacity: 0; transition: transform 200ms var(--ease-out), opacity 150ms ease; margin-top: -3px; }
.check input:checked { background: var(--paper); border-color: var(--paper); }
.check input:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.check input:active { transform: scale(.92); }
.steps__nav { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.btn--go { flex: 1; min-height: 60px; font-size: 18px; position: relative; overflow: hidden; }
.btn--go::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 30%, rgba(26,23,20,.12) 50%, transparent 70%);
  animation: sheen 3.2s var(--ease-io) infinite 1.5s;
}
@keyframes sheen { 0%, 60% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.btn--go .btn__label::after { content: "→"; margin-left: 10px; display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn--go:hover .btn__label::after { transform: translateX(4px); } }
.btn.is-loading .btn__label::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin 600ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps.is-shake .step.is-active { animation: shake 360ms var(--ease-out); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.demo { font-size: 13px; opacity: .6; }

/* cartão de embarque */
.pass-wrap { display: grid; gap: 16px; }
.pass-wrap__hello { font-size: clamp(30px, 7vw, 40px); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.03em; line-height: 1; outline: none; }
.pass-wrap__tip { font-size: 14px; opacity: .8; }
.printer { height: 10px; background: #000; margin: 0 -6px -16px; position: relative; z-index: 2; }
.pass { position: relative; z-index: 1; background: var(--paper); color: var(--ink); padding: 20px 20px 18px; overflow: hidden; }
.pass__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; }
.pass__logo { height: 26px; width: auto; }
.pass__event { font-size: 13px; text-align: right; line-height: 1.25; }
.pass__event b { font-size: 15px; font-variation-settings: "wdth" 112; }
.pass__body { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; }
.pass__cell--wide { grid-column: 1; }
.pass__seat { grid-column: 2; grid-row: 1 / span 3; text-align: right; display: grid; align-content: start; }
.k { font-size: 13px; opacity: .65; }
.v { font-size: 21px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.v--sm { font-size: 16px; font-weight: 600; }
.seat { font-size: clamp(60px, 15vw, 92px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: .9; }
.seat__hash { font-size: .32em; font-weight: 600; letter-spacing: 0; margin-right: 4px; vertical-align: .9em; }
.pass__tear { position: relative; height: 0; margin: 20px -20px 16px; border-top: 3px dotted rgba(26,23,20,.28); }
.pass__tear::before, .pass__tear::after { content: ""; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); }
.pass__tear::before { left: -13px; } .pass__tear::after { right: -13px; }
.pass__foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.code { font-size: 21px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barcode { flex: 1; min-width: 70px; max-width: 200px; height: 46px; fill: var(--ink); }
.stamp { position: absolute; right: 20px; top: 58%; padding: 8px 12px; border: 3px solid var(--ink); font-weight: 800; font-variation-settings: "wdth" 112; font-size: 14px; transform: rotate(-12deg); opacity: 0; pointer-events: none; }
.pass-actions { display: grid; gap: 10px; }
.pass-actions [aria-disabled="true"] { opacity: .55; pointer-events: none; }
.again { justify-self: start; background: none; border: 0; padding: 6px 0; color: inherit; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pass-wrap.is-printing .pass { animation: print 1.25s var(--ease-drawer) both; }
.pass-wrap.is-printing .stamp { animation: stamp 420ms var(--ease-out) 1.35s both; }
.pass-wrap.is-printing .pass-wrap__hello, .pass-wrap.is-printing .pass-wrap__tip, .pass-wrap.is-printing .pass-actions > * { animation: rise 600ms var(--ease-out) both; }
.pass-wrap.is-printing .pass-wrap__tip { animation-delay: 1.3s; }
.pass-wrap.is-printing .pass-actions > :nth-child(1) { animation-delay: 1.4s; }
.pass-wrap.is-printing .pass-actions > :nth-child(2) { animation-delay: 1.48s; }
.pass-wrap.is-printing .pass-actions > :nth-child(3) { animation-delay: 1.56s; }
.pass-wrap.is-printing .pass-actions > :nth-child(4) { animation-delay: 1.64s; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-40%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } to { opacity: .92; transform: rotate(-12deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pass-wrap:not(.is-printing) .stamp { opacity: .92; }

.soldout { display: grid; gap: 16px; justify-items: start; }
.soldout__title { font-size: clamp(32px, 7vw, 48px); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.03em; line-height: 1; }
.soldout__where { font-size: 19px; font-weight: 600; line-height: 1.35; }

/* =============== DEPOIS DA INSCRIÇÃO =============== */
.ticker { overflow: hidden; background: var(--ink); color: var(--paper); }
.ticker__track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 28px; padding: 16px 0 16px 28px; font-size: var(--t-big); font-weight: 600; white-space: nowrap; }
.ticker span::after { content: ""; width: 10px; height: 10px; background: currentColor; transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

.shutter { position: relative; margin: 56px var(--m) 0; overflow: hidden; background: var(--paper); aspect-ratio: 4 / 5; }
@media (min-width: 700px) { .shutter { aspect-ratio: 3 / 2; } }
.shutter img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.shutter figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: var(--bg); font-size: var(--t-note); }
.duo__when { font-size: var(--t-big); font-weight: 600; line-height: 1.35; max-width: 24ch; }

.h2 { font-size: var(--t-h2); font-weight: 700; font-variation-settings: "wdth" 112; line-height: .95; letter-spacing: -0.035em; }
.vitrine { padding-top: var(--gap); }
.vitrine__head { padding: 0 var(--m); display: grid; gap: 20px; }
.vitrine__text { max-width: 30rem; }
@media (min-width: 900px) { .vitrine__head { grid-template-columns: 7fr 5fr; align-items: end; gap: 48px; } .vitrine__text { font-size: 19px; } }
.rail { margin-top: 56px; overflow: hidden; }
.rail__track { display: flex; gap: 12px; width: max-content; padding: 0 var(--m); will-change: transform; }
.piece { position: relative; width: clamp(220px, 26vw, 360px); aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper); flex: none; }
.piece--wide { width: clamp(320px, 40vw, 560px); }
.piece img, .piece video { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.piece figcaption { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--paper); padding: 8px 14px; font-weight: 600; font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .piece:hover img, .piece:hover video { transform: scale(1.04); } }

.duo { display: grid; gap: 40px; padding: var(--gap) var(--m) 0; }
.duo__film { overflow: hidden; background: var(--paper); aspect-ratio: 9 / 14; max-height: 82svh; }
.duo__film video { width: 100%; height: 100%; object-fit: cover; }
.duo__copy { display: grid; gap: 32px; justify-items: start; }
.statement { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; font-weight: 600; }
.statement .w { opacity: .16; transition: opacity 200ms linear; }
.statement .w.on { opacity: 1; }
.price { font-size: clamp(44px, 5.4vw, 84px); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.035em; line-height: .95; font-variant-numeric: tabular-nums; }
.price__from { font-weight: 400; font-size: .42em; letter-spacing: 0; vertical-align: .55em; }
@media (min-width: 900px) { .duo { grid-template-columns: 5fr 7fr; align-items: center; gap: 64px; } .duo__film { aspect-ratio: 4 / 5; } }

.faq { padding: var(--gap) var(--m) 0; display: grid; gap: 64px; }
.faq__row { display: grid; gap: 12px; }
.faq__q { font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; }
.faq__q--head { font-weight: 700; font-variation-settings: "wdth" 112; font-size: var(--t-h2); line-height: .95; letter-spacing: -0.035em; }
.faq__a { max-width: 42ch; }
.faq__pic { overflow: hidden; background: var(--paper); aspect-ratio: 4 / 5; max-width: 420px; }
.faq__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 900px) {
  .faq { gap: 80px; }
  .faq__row { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
  .faq__row--head { align-items: end; }
  .faq__a { font-size: 18px; padding-top: .35em; }
  .faq__pic { max-width: none; aspect-ratio: 16 / 11; }
}


.foot { margin-top: var(--gap); background: var(--ink); color: var(--paper); padding: 72px var(--m) 0; overflow: hidden; min-height: 44svh; display: flex; flex-direction: column; }
.foot__top { display: grid; gap: 40px; justify-items: start; align-items: start; }
.foot .foot__logo { margin-top: auto; padding-top: 56px; }

/* trocar WhatsApp por e-mail */
.swap { display: inline-block; margin-top: 14px; padding: 6px 0; background: none; border: 0; color: var(--paper); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; opacity: .85; }
.big-input--mail { font-size: clamp(20px, 5.4vw, 28px); }
.foot__invite { display: grid; gap: 28px; justify-items: start; }
.foot__title { font-size: clamp(56px, 9vw, 140px); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -0.035em; line-height: .92; max-width: 8ch; }
.foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot__links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (min-width: 900px) { .foot__top { grid-template-columns: 1fr auto; } .foot__links { flex-direction: column; gap: 10px; } }
.foot__legal { margin-top: auto; padding-top: 64px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: var(--t-note); }
.foot__logo { width: 100%; height: auto; margin-top: 24px; transform: translateY(22%); transition: transform 1.2s var(--ease-out); }
.js .foot:not(.is-in) .foot__logo { transform: translateY(70%); }

/* barra de progresso da página */
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* fotos que aparecem (cortina + zoom) e depois têm parallax */
[data-img] { overflow: hidden; }
[data-img] > img, [data-img] > video, [data-img] > picture img { will-change: transform; }
.js [data-img] { clip-path: inset(10% 8% 10% 8%); opacity: .35; }
.js [data-img] > img, .js [data-img] > video { transform: scale(1.25); }
.js [data-img].is-in { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1.3s var(--ease-io) var(--d, 0ms), opacity 400ms ease var(--d, 0ms); }
.js [data-img].is-in > img, .js [data-img].is-in > video { transform: scale(1); transition: transform 1.6s var(--ease-out) var(--d, 0ms); }
.js [data-img].is-in > [data-par] { transform: scale(1.12) translateY(var(--py, 0%)); }
.js [data-img].is-settled > img, .js [data-img].is-settled > video { transition: none; }

/* =============== ANIMAÇÕES DE TEXTO (estilo SaaS) =============== */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
/* Linha por linha: cada linha sobe de trás de uma máscara e acende de baixo
   para cima num degradê (referência: "Text Reveal (Mask)" do 21st.dev). Sem desfoque. */
.tl { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.tl__in {
  display: block;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 35%, #000 100%);
          mask-image: linear-gradient(to top, transparent 0%, #000 35%, #000 100%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.js [data-split]:not(.is-in) .tl__in, .js [data-words]:not(.is-in) .tl__in {
  transform: translateY(105%);
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
}
.js [data-split].is-in .tl__in, .js [data-words].is-in .tl__in {
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), -webkit-mask-position 1.3s var(--ease-out), mask-position 1.3s var(--ease-out);
  transition-delay: calc(var(--base, 0ms) + var(--l) * 110ms);
}
[data-words] { --base: 200ms; }
/* entrada do painel */
.js .kiosk { opacity: 0; transform: translateY(30px) scale(.98); }
.is-ready .kiosk { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out) 350ms, transform 900ms var(--ease-out) 350ms; }

/* Decisão do Davy (2026-11-05): a animação completa roda sempre,
   mesmo quando o Windows/celular pede "reduzir movimento". */