/* Início: faixa em movimento, queridinhos, como funciona, combos, onde estamos e fechamento. */
.home main { position: relative; background: var(--ink); }

.ticker { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid rgba(230, 177, 75, .35); background: linear-gradient(90deg, #4a070d, #2a0a30 50%, #4a070d); }
.ticker__track { display: flex; width: max-content; align-items: center; gap: clamp(22px, 3vw, 44px); padding-block: 16px; animation: tick 46s linear infinite; }
.ticker__track span { font: 600 clamp(13px, 1.1vw, 16px)/1 var(--ff-c); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-l); white-space: nowrap; }
.ticker__track i { font-style: normal; color: var(--gold); font-size: 12px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* queridinhos */
.qrow { background: radial-gradient(60% 40% at 100% 0%, rgba(120, 36, 130, .35), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(179, 20, 28, .3), transparent 70%), var(--ink); }
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.qcard { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 22px 22px 20px; border-radius: var(--r-lg); text-decoration: none; overflow: hidden; border: 1px solid rgba(230, 177, 75, .28); isolation: isolate; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.qcard::before { content: ''; position: absolute; inset: 0; z-index: -1; transition: transform .8s var(--ease); }
.qcard--p::before { background: radial-gradient(80% 70% at 50% 38%, #a3111b 0%, #5a0a11 62%, #2a0408 100%); }
.qcard--a::before { background: radial-gradient(80% 70% at 50% 38%, #6f2278 0%, #35113d 62%, #1b0620 100%); }
.qcard:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 36px 60px -28px rgba(0, 0, 0, .95); }
.qcard:hover::before { transform: scale(1.08); }
.qcard__tag { justify-self: start; font: 600 11px/1 var(--ff-c); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-l); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(230, 177, 75, .5); }
.qcard img { width: 88%; margin: 4px auto 0; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .6)); transition: transform .7s var(--ease); }
.qcard:hover img { transform: scale(1.09) rotate(-4deg) translateY(-4px); }
.qcard__name { font: 700 clamp(26px, 2.5vw, 34px)/1.05 var(--ff-d); font-stretch: 84%; letter-spacing: -.015em; }
.qcard__desc { color: var(--mute); font-size: 15px; line-height: 1.4; }
.qcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(247, 236, 216, .16); }
.qcard__foot b { font: 600 clamp(15px, 1.3vw, 18px)/1 var(--ff-c); letter-spacing: .06em; color: var(--gold-l); }
.qcard__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-style: normal; transition: transform .4s var(--ease); }
.qcard:hover .qcard__go { transform: rotate(-45deg) scale(1.1); }
.qmore { margin: clamp(28px, 4vw, 48px) 0 0; display: flex; justify-content: center; }

/* como funciona */
.steps { background: var(--ink-2); border-block: 1px solid var(--line); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); counter-reset: s; position: relative; }
.steps__list::before { content: ''; position: absolute; left: 0; right: 0; top: 36px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(230, 177, 75, .15)); }
.steps__list li { position: relative; padding-top: 0; }
.steps__n { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--ink-2); border: 1.5px solid var(--gold); font: 600 30px/1 var(--ff-c); color: var(--gold-l); box-shadow: 0 0 0 8px var(--ink-2); }
.steps__list h3 { margin: 22px 0 8px; font: 700 clamp(30px, 3vw, 42px)/1 var(--ff-d); font-stretch: 82%; letter-spacing: -.02em; }
.steps__list p { margin: 0; max-width: 34ch; color: var(--mute); font-size: 16.5px; }
.steps__link { margin: clamp(32px, 4vw, 52px) 0 0; }
.steps__link a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gold-l); text-underline-offset: 5px; }

/* combos */
.combos-t { background: radial-gradient(60% 50% at 0% 0%, rgba(179, 20, 28, .32), transparent 70%), var(--ink); }
.combo-grid--home { grid-template-columns: repeat(3, 1fr); }

/* onde estamos */
.where { background: var(--ink-2); border-top: 1px solid var(--line); }
.where__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.where address { font: 600 clamp(22px, 2.2vw, 30px)/1.3 var(--ff-d); font-style: normal; font-stretch: 90%; }
.where__h { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--mute); font-size: 17px; }
.where__h .ico { color: var(--gold); }
.where__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.where__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(230, 177, 75, .35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); background: #1a1013; }
.where__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.88) sepia(.35) hue-rotate(-12deg) saturate(1.3); }

/* fechamento */
.finale { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: clamp(90px, 12vw, 190px); background: radial-gradient(70% 90% at 15% 100%, rgba(179, 20, 28, .75), transparent 70%), radial-gradient(70% 90% at 85% 100%, rgba(120, 36, 130, .75), transparent 70%), #12070a; border-top: 1px solid rgba(230, 177, 75, .3); }
.finale__in { position: relative; z-index: 2; width: min(760px, 100% - 40px); margin-inline: auto; }
.finale h2 { margin: 0; font: 700 clamp(64px, 11vw, 168px)/.9 var(--ff-d); font-stretch: 76%; letter-spacing: -.035em; background: linear-gradient(180deg, #fff3cf, #e6b14b 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.finale .sslogan { margin: 18px 0 32px; }
.finale__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }

@media (max-width: 899px) {
  .qgrid, .combo-grid--home { grid-template-columns: 1fr; }
  .steps__list { grid-template-columns: 1fr; gap: 36px; }
  .steps__list::before { display: none; }
  .steps__list li { display: grid; grid-template-columns: 74px 1fr; column-gap: 20px; }
  .steps__n { grid-row: span 2; }
  .steps__list h3 { margin: 4px 0 6px; }
  .where__grid { grid-template-columns: 1fr; }
    }

/* mascote: ao lado do título de "Como funciona" e cortado no canto do final */
.steps__wrap { position: relative; }
.steps__ki { position: absolute; z-index: 1; right: 2%; top: -6px; width: clamp(150px, 19vw, 280px); transform: rotate(7deg); transform-origin: 50% 100%; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .55)); pointer-events: none; }
.finale__ki { position: absolute; z-index: 1; left: -4vw; bottom: -14%; width: clamp(200px, 27vw, 420px); transform: rotate(-9deg); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); pointer-events: none; }
@media (max-width: 899px) {
  .steps__ki { width: 104px; top: -10px; right: 0; }
  .steps .stitle { padding-right: 96px; }
  .finale__ki { width: 46vw; left: -9vw; bottom: -9%; opacity: .92; }
  .finale { padding-bottom: 170px; }
}