/* Jornada do lead: celular com 4 telas (anúncio → site → WhatsApp → venda fechada) + passos. Sem JS: mostra só o anúncio. */
.tn-jp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; justify-content: center; }
.tn-jp__phone { inline-size: clamp(14.5rem, 17vw, 16.5rem); padding: 0.5rem; background: #0b0b0c; border: 2px solid #2d2d30; border-radius: 2.6rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.tn-jp__screen { container-type: inline-size; position: relative; overflow: hidden; aspect-ratio: 9 / 19.5; border-radius: 2.15rem; background: #fff; color: #0b0b0c; font-family: var(--tn-font-body, inherit); }
.tn-jp__island { position: absolute; z-index: 5; inset-block-start: 2.6cqw; inset-inline: 32cqw; block-size: 7cqw; border-radius: 999px; background: #000; }
.tn-jp__home { position: absolute; z-index: 5; inset-block-end: 2cqw; inset-inline: 36cqw; block-size: 1.1cqw; border-radius: 999px; background: rgba(11, 11, 12, 0.5); }
.tn-jp__s { position: absolute; inset: 0; padding: 14cqw 5cqw 6cqw; display: flex; flex-direction: column; gap: 3.2cqw; }
.tn-jp__s:not([data-step="0"]) { display: none; }
.tn-jp.is-js .tn-jp__s:not([data-step="0"]) { display: flex; }
.tn-jp s, .tn-jp u { text-decoration: none; display: block; }
.tn-jp__lines { display: grid; gap: 1.6cqw; }
.tn-jp__lines s { block-size: 2cqw; background: #d9d7d1; inline-size: 88%; }
.tn-jp__lines s.short { inline-size: 55%; }

.tn-jp__adhead, .tn-jp__wahead { display: flex; align-items: center; gap: 2.6cqw; }
.tn-jp__adhead b { flex: none; inline-size: 8.5cqw; block-size: 8.5cqw; border-radius: 50%; background: #0b0b0c; border: 1.2cqw solid #d2a833; }
.tn-jp__adhead span, .tn-jp__wahead span { display: grid; line-height: 1.15; }
.tn-jp__adhead strong, .tn-jp__wahead strong { font-size: 3.6cqw; font-weight: 600; }
.tn-jp__adhead small { font-size: 2.8cqw; color: rgba(11, 11, 12, 0.66); }
.tn-jp__creative { display: grid; align-content: center; gap: 3cqw; aspect-ratio: 1 / 1; padding: 7cqw; background: #0b0b0c; color: #fff; }
.tn-jp__creative span { font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: 8cqw; line-height: 1.08; letter-spacing: -0.01em; }
.tn-jp__creative u { justify-self: start; padding: 1.2cqw 2.6cqw; border: 1px solid #d2a833; color: #d2a833; font-size: 2.8cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tn-jp__adcta { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 3.5cqw; background: #f2f1ee; font-size: 3.4cqw; font-weight: 600; }
.tn-jp__adcta em { font-style: normal; font-size: 5cqw; line-height: 1; }
.tn-jp__actions { display: flex; gap: 3cqw; }
.tn-jp__actions svg { inline-size: 6cqw; block-size: 6cqw; fill: none; stroke: #0b0b0c; stroke-width: 1.8; stroke-linejoin: round; }

.tn-jp__sbar { display: flex; align-items: center; justify-content: space-between; padding-block-end: 2.5cqw; border-block-end: 1px solid #e6e4de; }
.tn-jp__sbar b { inline-size: 24cqw; block-size: 4cqw; background: #0b0b0c; }
.tn-jp__sbar u { inline-size: 6cqw; block-size: 2cqw; background: #0b0b0c; box-shadow: 0 2cqw 0 #0b0b0c; }
.tn-jp__stitle { display: grid; gap: 2cqw; margin-block: 2cqw 1cqw; }
.tn-jp__stitle s { block-size: 5cqw; background: #0b0b0c; inline-size: 92%; }
.tn-jp__stitle s.short { inline-size: 60%; }
.tn-jp__field { block-size: 9cqw; border: 1px solid #cfcdc7; background: #fafaf8; }
.tn-jp__sbtn { padding: 3.2cqw; text-align: center; background: #d2a833; color: #0b0b0c; font-size: 3.4cqw; font-weight: 600; }
.tn-jp__scards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqw; }
.tn-jp__scards s { block-size: 16cqw; background: #f2f1ee; }

.tn-jp__s--wa { padding: 12cqw 0 6cqw; gap: 0; background: #efeae2; }
.tn-jp__wahead { padding: 3cqw 4cqw; background: #0b0b0c; color: #fff; }
.tn-jp__wahead b { flex: none; inline-size: 8cqw; block-size: 8cqw; border-radius: 50%; background: #d2a833; }
.tn-jp__wahead small { font-size: 2.8cqw; color: #25d366; }
.tn-jp__chat { display: flex; flex-direction: column; gap: 2.4cqw; padding: 4cqw 3.5cqw; }
.tn-jp__msg { margin: 0; max-inline-size: 78%; padding: 2.4cqw 3cqw; font-size: 3.3cqw; line-height: 1.3; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }
.tn-jp__msg--out { align-self: flex-end; background: #d9fdd3; border-radius: 3cqw 3cqw 0.8cqw 3cqw; }
.tn-jp__msg--in { align-self: flex-start; background: #fff; border-radius: 3cqw 3cqw 3cqw 0.8cqw; }

.tn-jp__s--won { align-items: center; justify-content: center; text-align: center; background: #0b0b0c; color: #fff; gap: 2.6cqw; }
.tn-jp__badge { inline-size: 24cqw; block-size: 24cqw; border-radius: 50%; background: #d2a833; display: grid; place-items: center; margin-block-end: 3cqw; }
.tn-jp__badge svg { inline-size: 12cqw; block-size: 12cqw; fill: none; stroke: #0b0b0c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tn-jp__won { font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: 8cqw; letter-spacing: -0.01em; }
.tn-jp__wonsub { font-size: 3.4cqw; color: rgba(255, 255, 255, 0.7); }
.tn-jp__lines--light { inline-size: 70%; margin-block-start: 4cqw; }
.tn-jp__lines--light s { background: rgba(255, 255, 255, 0.18); }
.tn-jp__s--won .tn-jp__home { background: #fff; }

.tn-jp__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tn-jp__step { display: flex; align-items: flex-start; gap: 1rem; padding-block: 0.9rem; position: relative; color: rgba(255, 255, 255, 0.5); transition: color 0.4s ease; }
.tn-jp__step + .tn-jp__step::before { content: ""; position: absolute; inset-inline-start: 1.1rem; inset-block-start: -0.9rem; block-size: 1.8rem; inline-size: 1px; background: rgba(255, 255, 255, 0.2); }
.tn-jp__n { flex: none; inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; background: #0b0b0c; position: relative; z-index: 1; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.tn-jp__t { display: grid; gap: 0.2rem; padding-block-start: 0.1rem; }
.tn-jp__t strong { font-size: 1rem; font-weight: 600; }
.tn-jp__t small { font-size: 0.8125rem; line-height: 1.4; }
.tn-jp__step.is-active { color: #fff; }
.tn-jp__step.is-active .tn-jp__n { background: #d2a833; border-color: #d2a833; color: #0b0b0c; }
.tn-jp:not(.is-js) .tn-jp__step { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 899px) {
  .tn-jp { grid-template-columns: 1fr; justify-items: center; }
  .tn-jp__phone { inline-size: min(70vw, 15.5rem); }
  .tn-jp__steps { inline-size: 100%; }
}