/* Tema: noite antes da prova. Escuro, frio, com vermelho de urgência e âmbar de esperança. */
:root {
  --bg: #0b0d12;
  --bg2: #10131a;
  --card: #161a23;
  --card2: #1c2130;
  --line: #262c3b;
  --ink: #e9eaf0;
  --muted: #9aa1b2;
  --dim: #6c7385;
  --red: #ff3d3d;
  --red-d: #c81e1e;
  --amber: #ffb627;
  --amber-d: #e08e00;
  --green: #2bd576;
  --blue: #7fb2ff;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  display: block
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 18px
}

.narrow {
  max-width: 720px
}

h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -.6px;
  margin: 0 0 14px;
  color: #fff
}

h1 {
  font-size: clamp(31px, 6.8vw, 56px);
  font-weight: 900
}

h2 {
  font-size: clamp(25px, 4.8vw, 38px);
  font-weight: 850
}

h3 {
  font-size: 21px;
  font-weight: 800
}

p {
  margin: 0 0 14px
}

a {
  color: var(--amber)
}

.hl {
  color: var(--amber)
}

.red {
  color: var(--red)
}

.muted {
  color: var(--muted)
}

.center {
  text-align: center
}

.strike {
  text-decoration: line-through;
  color: var(--dim)
}

mark {
  background: none;
  color: var(--amber);
  box-shadow: inset 0 -.18em 0 rgba(255, 182, 39, .28)
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 14px
}

.eyebrow.amber {
  color: var(--amber)
}

/* barra de contagem regressiva */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(90deg, #3a0808, #5a0b0b 50%, #3a0808);
  color: #fff;
  font-size: 13.5px;
  padding: 8px 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #7a1a1a
}

.topbar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255, 61, 61, .7);
  animation: ping 1.6s infinite
}

.clock {
  display: inline-flex;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 800
}

.clock span {
  background: rgba(0, 0, 0, .35);
  padding: 1px 6px;
  border-radius: 4px
}

.topbar.ok {
  background: #0f3a24;
  border-color: #1c6b43
}

/* hero */
.hero {
  position: relative;
  padding: 44px 0 34px;
  overflow: hidden;
  text-align: center
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  filter: grayscale(.85) contrast(1.05) brightness(.38) blur(1px);
  transform: scale(1.05)
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(11, 13, 18, .2), var(--bg) 78%), linear-gradient(180deg, rgba(11, 13, 18, .35), var(--bg))
}

.hero .wrap {
  position: relative;
  z-index: 2
}

.hero .sub {
  font-size: clamp(17px, 2.4vw, 20px);
  color: #cfd3dd;
  max-width: 700px;
  margin: 0 auto 24px
}

.vsl {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  margin: 4px 0 22px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 6px rgba(255, 61, 61, .07)
}

.vsl iframe,
.vsl video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.vsl-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: center/cover;
  color: #fff
}

.vsl-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, .62)
}

.vsl-ph>* {
  position: relative
}

.vsl-ph .play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  padding-left: 7px;
  animation: pulse-red 2s infinite
}

.vsl-ph small {
  color: #d7d9e0
}

.sound {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px
}

/* CTA animado */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffc94d, var(--amber) 45%, var(--amber-d));
  color: #1a1204;
  text-decoration: none;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
  padding: 19px 28px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 0 #9a5f00, 0 18px 40px rgba(255, 182, 39, .28);
  transition: transform .08s, box-shadow .08s;
  animation: breathe 2.4s ease-in-out infinite;
  max-width: 100%;
  text-align: center;
  font-family: inherit
}

.cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s infinite
}

.cta .arrow {
  display: inline-block;
  animation: nudge 1.2s ease-in-out infinite
}

.cta:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #9a5f00, 0 8px 20px rgba(255, 182, 39, .2)
}

.cta.block {
  display: flex;
  width: 100%
}

.cta.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line);
  animation: none
}

.cta.ghost::after {
  display: none
}

.cta[disabled] {
  opacity: .7;
  cursor: wait;
  animation: none
}

.cta-sub {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.025)
  }
}

@keyframes shine {
  0% {
    left: -60%
  }

  55%,
  100% {
    left: 130%
  }
}

@keyframes nudge {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(5px)
  }
}

@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 61, 61, .7)
  }

  80%,
  100% {
    box-shadow: 0 0 0 10px rgba(255, 61, 61, 0)
  }
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 61, 61, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(255, 61, 61, 0)
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}

.trust {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px
}

/* seções */
.section {
  padding: 64px 0
}

.section.alt {
  background: var(--bg2)
}

.section.red-glow {
  background: radial-gradient(ellipse at center, #2a0c0e 0%, var(--bg) 70%)
}

.lead {
  font-size: clamp(17px, 2.3vw, 19.5px);
  color: #cfd3dd
}

.big-quote {
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  border-left: 4px solid var(--red);
  padding-left: 18px;
  margin: 22px 0
}

.story {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center
}

.photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 0
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.55) contrast(1.05) brightness(.85)
}

.photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  font-size: 12px;
  color: #d0d3db;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8))
}

.photo.tall {
  aspect-ratio: 3/4
}

.photo.wide {
  aspect-ratio: 16/10
}

.photos2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.photos2.single {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto
}

.photos2.single .photo.wide {
  aspect-ratio: 16/9
}

.pain-list {
  list-style: none;
  padding: 0;
  margin: 18px 0
}

.pain-list li {
  padding: 12px 14px 12px 44px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  color: #dfe2ea
}

.pain-list li::before {
  content: "✕";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 61, 61, .15);
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center
}

.feat {
  list-style: none;
  padding: 0;
  margin: 16px 0
}

.feat li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 8px;
  color: #dfe2ea
}

.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0 8px
}

.quotes blockquote {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  font-style: italic;
  color: #d8dbe3;
  font-size: 16px
}

.quotes blockquote::before {
  content: "“";
  display: block;
  font-size: 40px;
  line-height: .6;
  color: var(--red);
  font-style: normal;
  margin-bottom: 6px
}

.note {
  font-size: 12px;
  color: var(--dim)
}

.math {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px
}

.stat b {
  display: block;
  font-size: 46px;
  line-height: 1;
  color: var(--amber);
  font-weight: 900;
  margin-bottom: 8px
}

.stat p {
  margin: 0;
  color: #cfd3dd;
  font-size: 15.5px
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0
}

.compare .col {
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--card)
}

.compare .bad {
  border-color: #4a1d22
}

.compare .good {
  border-color: #5a4513;
  background: linear-gradient(180deg, #1f1a0f, var(--card))
}

.compare h3 {
  font-size: 18px
}

.compare ul {
  margin: 0;
  padding-left: 18px;
  color: #d3d6de
}

.compare li {
  margin: 6px 0
}

.steps {
  display: grid;
  gap: 14px;
  margin: 26px 0
}

.step {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px
}

.step .n {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2a2f40, #1b1f2b);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: var(--amber)
}

.step h3 {
  margin-bottom: 4px
}

.step p {
  margin: 0;
  color: #cfd3dd
}

.step .time {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blue);
  margin-bottom: 4px
}

.step .only {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #1a1204;
  background: var(--amber);
  padding: 2px 7px;
  border-radius: 5px;
  vertical-align: middle
}

.skeleton {
  display: grid;
  gap: 8px;
  margin: 18px 0
}

.skeleton div {
  background: #0f1219;
  border: 1px dashed #33394a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  color: #cfd3dd
}

.skeleton b {
  color: var(--amber)
}

.demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center
}

.phone {
  border-radius: 28px;
  border: 10px solid #1f2330;
  background: #0f1219;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto
}

.alert {
  background: linear-gradient(180deg, #1b0c0e, #140a0c);
  border: 1px solid #4a1d22;
  border-radius: 16px;
  padding: 24px
}

.alert .tag {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 12px
}

.source {
  font-size: 12px;
  color: var(--dim)
}

.source a {
  color: var(--muted)
}

/* planos */
.plans {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 30px
}

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column
}

.plan.best {
  background: linear-gradient(180deg, #221b0c, #161a23 55%);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 6px rgba(255, 182, 39, .08), 0 30px 70px rgba(0, 0, 0, .5)
}

.plan .ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #1a1204;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  padding: 6px 14px;
  border-radius: 30px;
  white-space: nowrap
}

.plan h3 {
  font-size: 22px;
  margin-bottom: 4px
}

.plan .for {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px
}

.plan .price {
  font-size: 52px;
  font-weight: 950;
  color: #fff;
  line-height: 1;
  margin: 10px 0 4px
}

.plan .price small {
  font-size: 18px;
  font-weight: 700;
  color: var(--muted)
}

.plan .per {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1
}

.plan li {
  padding: 7px 0 7px 28px;
  position: relative;
  font-size: 15.5px;
  color: #d9dce4;
  border-bottom: 1px dashed #252a38
}

.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--green);
  font-weight: 900
}

.plan li.no {
  color: var(--dim)
}

.plan li.no::before {
  content: "—";
  color: var(--dim)
}

.plan li b {
  color: #fff
}

.plan .cta {
  width: 100%
}

.plan .cta.ghost {
  font-size: 16px
}

.bump-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
  text-align: center
}

/* depoimentos */
.testis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px
}

.testi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  position: relative
}

.testi .who {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px
}

.testi .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2a3042;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--amber);
  flex: 0 0 40px;
  overflow: hidden
}

.testi .av img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.testi .who b {
  display: block;
  font-size: 14.5px;
  color: #fff
}

.testi .who small {
  color: var(--muted);
  font-size: 12px
}

.testi p {
  font-size: 15px;
  color: #d7dae2;
  margin: 0
}

.testi .score {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--green);
  background: rgba(43, 213, 118, .1);
  padding: 3px 8px;
  border-radius: 6px
}

.testi .placeholder {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #1a1204;
  background: var(--amber);
  padding: 2px 6px;
  border-radius: 4px
}

.fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.fit .box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px
}

.fit ul {
  margin: 0;
  padding-left: 18px;
  color: #d3d6de
}

.fit li {
  margin: 7px 0
}

.guarantee {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px
}

.seal {
  flex: 0 0 118px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3de58b, #159a50);
  color: #04150b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 50px;
  line-height: 1;
  box-shadow: 0 0 0 8px rgba(43, 213, 118, .12)
}

.seal small {
  font-size: 12.5px;
  letter-spacing: 2px
}

details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  margin: 10px 0
}

summary {
  font-weight: 750;
  cursor: pointer;
  color: #fff;
  list-style: none
}

summary::-webkit-details-marker {
  display: none
}

summary::after {
  content: "+";
  float: right;
  color: var(--amber);
  font-weight: 900
}

details[open] summary::after {
  content: "−"
}

details p {
  margin: 10px 0 0;
  color: #cfd3dd
}

.final {
  position: relative;
  padding: 84px 0;
  overflow: hidden;
  text-align: center
}

.final .bg {
  position: absolute;
  inset: 0;
  background: center/cover;
  filter: grayscale(1) brightness(.22)
}

.final .wrap {
  position: relative
}

.footer {
  padding: 30px 0 100px;
  font-size: 12.5px;
  color: var(--dim);
  border-top: 1px solid var(--line)
}

.footer a {
  color: var(--muted)
}

.sticky {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 50;
  display: none
}

.sticky .cta {
  width: 100%;
  font-size: 16px;
  padding: 15px
}

.sticky.show {
  display: block
}

/* formulários (corretor / envio / admin) */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px
}

label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin: 14px 0 6px;
  color: #dfe2ea
}

input[type=email],
input[type=text],
input[type=tel],
input[type=password],
textarea,
select {
  width: 100%;
  background: #0e1118;
  border: 1px solid #2d3445;
  border-radius: 10px;
  color: #fff;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px
}

textarea {
  min-height: 260px;
  resize: vertical
}

input:focus,
textarea:focus {
  outline: 2px solid var(--amber);
  border-color: transparent
}

.drop {
  border: 2px dashed #3a4155;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  cursor: pointer
}

.thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px
}

.thumbs img {
  width: 84px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line)
}

.msg {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px
}

.msg.err {
  background: rgba(255, 61, 61, .12);
  border: 1px solid #5a1f24;
  color: #ffb3b3
}

.msg.ok {
  background: rgba(43, 213, 118, .1);
  border: 1px solid #1d5a3a;
  color: #a8f0c8
}

.score-big {
  font-size: 72px;
  font-weight: 950;
  line-height: 1;
  color: var(--amber)
}

.bars {
  display: grid;
  gap: 12px;
  margin: 18px 0
}

.bar {
  background: #0e1118;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px
}

.bar .top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  margin-bottom: 6px
}

.bar .track {
  height: 8px;
  background: #232838;
  border-radius: 6px;
  overflow: hidden
}

.bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--amber), var(--green));
  border-radius: 6px
}

.bar p {
  font-size: 14px;
  color: #cfd3dd;
  margin: 8px 0 0
}

.tabs {
  display: flex;
  gap: 8px;
  margin-top: 6px
}

.tabs button {
  flex: 1;
  background: #0e1118;
  border: 1px solid #2d3445;
  color: var(--muted);
  padding: 10px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer
}

.tabs button.on {
  border-color: var(--amber);
  color: #fff
}

.hidden {
  display: none !important
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, .25);
  border-top-color: #1a1204;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
  vertical-align: middle
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

table.admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

table.admin td,
table.admin th {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top
}

@media (max-width:760px) {
  body {
    font-size: 16.5px
  }

  .story,
  .demo,
  .plans,
  .compare,
  .fit,
  .quotes {
    grid-template-columns: 1fr
  }

  .math,
  .testis {
    grid-template-columns: 1fr
  }

  .plan.best {
    order: -1
  }

  .guarantee {
    flex-direction: column;
    text-align: center
  }

  .cta {
    width: 100%
  }

  .section {
    padding: 52px 0
  }
}

@media (min-width:761px) {
  .sticky {
    display: none !important
  }
}

/* ---- v3: destaque dos dias, carrossel e foto nos comentários ---- */
.days-box {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 0 .28em;
  border-radius: .14em;
  box-shadow: 0 0 0 3px rgba(255, 61, 61, .25), 0 10px 30px rgba(255, 61, 61, .35);
  white-space: nowrap;
  animation: pulse-box 2.2s ease-in-out infinite
}

@keyframes pulse-box {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(255, 61, 61, .25), 0 10px 30px rgba(255, 61, 61, .35)
  }

  50% {
    box-shadow: 0 0 0 7px rgba(255, 61, 61, .12), 0 10px 40px rgba(255, 61, 61, .55)
  }
}

.carousel {
  position: relative
}

.c-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 14px
}

.c-track::-webkit-scrollbar {
  display: none
}

.c-track .slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4/5
}

.c-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px
}

.c-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: #3a4155;
  padding: 0;
  cursor: pointer
}

.c-dots button.on {
  background: var(--red);
  width: 22px;
  border-radius: 6px
}

.q-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-style: normal
}

.q-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 40px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a3042, #1b1f2b);
  border: 2px solid #3a4155;
  display: flex;
  align-items: center;
  justify-content: center
}

.q-av::after {
  content: "👤";
  font-size: 18px;
  opacity: .6
}

.q-av img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.q-av:has(img)::after {
  content: none
}

.q-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

.quotes blockquote::before {
  display: none
}

/* ---- v4: páginas pós-compra (upgrade / upsell / downsell) ---- */
.topbar.warn{background:linear-gradient(90deg,#3a0808,#5a0b0b 50%,#3a0808)}
.pc-hero{padding:34px 0 10px}
.pc-hero h1{font-size:clamp(28px,6vw,48px)}
.step-bar{display:flex;gap:6px;justify-content:center;margin:0 0 18px;flex-wrap:wrap}
.step-bar span{font-size:11.5px;font-weight:800;letter-spacing:1px;padding:5px 10px;border-radius:20px;background:#161a23;border:1px solid var(--line);color:var(--dim)}
.step-bar span.done{color:var(--green);border-color:#1d5a3a}
.step-bar span.now{color:#1a1204;background:var(--amber);border-color:var(--amber)}
.offer{max-width:640px;margin:0 auto}
.offer .plan{padding:30px 24px}
.offer .price{font-size:64px}
.anchor{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 18px}
.anchor div{background:#0e1118;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;font-size:14px;color:var(--muted)}
.anchor b{display:block;font-size:22px;color:#fff;margin-bottom:2px}
.pill-warn{display:inline-block;background:rgba(255,61,61,.12);border:1px solid #5a1f24;color:#ffb3b3;font-size:13px;font-weight:700;padding:6px 12px;border-radius:30px;margin-bottom:14px}
.decline-link{display:block;text-align:center;margin-top:18px;font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.decline-link:hover{color:var(--muted)}
.mini-faq{max-width:640px;margin:0 auto}
.kiwify-slot:empty{display:none}
.vsl.short{max-width:640px;margin-left:auto;margin-right:auto}
.checklist-next{list-style:none;padding:0;margin:16px 0;counter-reset:n}
.checklist-next li{counter-increment:n;position:relative;padding:14px 14px 14px 56px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;text-align:left}
.checklist-next li::before{content:counter(n);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:8px;background:var(--amber);color:#1a1204;font-weight:900;display:flex;align-items:center;justify-content:center}
@media (max-width:760px){.anchor{grid-template-columns:1fr}}

/* preço anterior riscado (upsell/downsell) */
.was{font-size:15px;color:var(--muted,#9aa0ad);margin:4px 0 -2px;font-weight:700}.was s{color:#ff6b6b;font-weight:800;font-size:22px;text-decoration-thickness:3px;margin-left:4px}
/* Área do Aluno (página de vendas) */
.area-note{display:flex;gap:14px;align-items:flex-start;margin-top:22px;background:linear-gradient(90deg,#1b1609,#141821);border:1px solid #6b4f10;border-left:5px solid var(--amber,#f5a300);border-radius:14px;padding:16px 18px}
.area-note-ic{font-size:26px;line-height:1;flex:none;width:46px;height:46px;border-radius:12px;background:#0f1219;border:1px solid #33394a;display:flex;align-items:center;justify-content:center}
.area-note h3{margin:0 0 4px;font-size:18px;color:#fff}.area-note p{margin:0;font-size:15px;color:#d6d9e1}