:root {
      --cave: #1B1419;
      /* fundo caverna — plúmbeo profundo quente */
      --cave-2: #241A22;
      --cave-3: #2E2029;
      --gold: #C9A24B;
      /* luz / dourado champagne */
      --gold-bright: #E6C879;
      --gold-deep: #9B7A30;
      --ivory: #F4EDE0;
      /* creme quente — segurança */
      --ivory-2: #EBE0CE;
      --rose: #B5746A;
      /* rosa-argila sóbrio */
      --rose-soft: #D7A99E;
      --ink: #2A2127;
      /* texto sobre claro */
      --ink-soft: #6A5C62;
      --line-light: rgba(42, 33, 39, .14);
      --line-dark: rgba(244, 237, 224, .16);
      --maxw: 1180px;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  html {
      scroll-behavior: smooth
  }

  body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--cave);
      color: var(--ivory);
      font-size: 18px;
      line-height: 1.6;
      font-weight: 330;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }

  /* textura de grão fixa por cima de tudo */
  body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: .05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
  }

  .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 28px
  }

  h1,
  h2,
  h3,
  h4,
  .serif {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      letter-spacing: -.01em;
      line-height: 1.1
  }

  em,
  .it {
      font-style: italic
  }

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

  .rose {
      color: var(--rose-soft)
  }

  /* ---------- HEADER ---------- */
  header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: .4s ease;
      padding: 20px 0;
      border-bottom: 1px solid transparent
  }

  header.scrolled {
      background: rgba(27, 20, 25, .82);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line-dark);
      padding: 13px 0
  }

  .nav {
      display: flex;
      align-items: center;
      justify-content: space-between
  }

  .brand {
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ivory);
      font-weight: 500
  }

  .brand b {
      color: var(--gold);
      font-weight: 400
  }

  .btn {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: .02em;
      cursor: pointer;
      border: none;
      text-decoration: none;
      padding: 15px 30px;
      border-radius: 2px;
      transition: .3s cubic-bezier(.2, .7, .2, 1);
      position: relative
  }

  .btn-gold {
      background: var(--gold);
      color: #1B1419
  }

  .btn-gold:hover {
      background: var(--gold-bright);
      transform: translateY(-2px);
      box-shadow: 0 14px 34px -10px rgba(201, 162, 75, .55)
  }

  .btn-sm {
      padding: 11px 22px;
      font-size: 14px
  }

  .btn-ghost {
      background: transparent;
      border: 1px solid var(--line-dark);
      color: var(--ivory)
  }

  .btn-ghost:hover {
      border-color: var(--gold);
      color: var(--gold)
  }

  /* ---------- HERO ---------- */
  .hero {
      position: relative;
      padding: 170px 0 90px;
      text-align: center;
      overflow: hidden
  }

  .hero .glow {
      position: absolute;
      left: 50%;
      top: 8%;
      width: min(900px, 120vw);
      height: 760px;
      transform: translateX(-50%);
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at center top, rgba(201, 162, 75, .30), rgba(201, 162, 75, .06) 42%, transparent 66%);
      filter: blur(8px);
      animation: breathe 9s ease-in-out infinite
  }

  @keyframes breathe {

      0%,
      100% {
          opacity: .75
      }

      50% {
          opacity: 1
      }
  }

  /* arco da caverna por trás do herói */
  .hero .arch {
      position: absolute;
      left: 50%;
      top: 60px;
      transform: translateX(-50%);
      width: min(620px, 86vw);
      height: 760px;
      z-index: 0;
      border: 1px solid var(--line-dark);
      border-bottom: none;
      border-radius: 50% 50% 0 0 / 62% 62% 0 0;
      background: linear-gradient(180deg, rgba(201, 162, 75, .05), transparent 55%)
  }

  .hero .inner {
      position: relative;
      z-index: 2;
      max-width: 880px;
      margin: 0 auto
  }

  .kicker {
      font-size: 13px;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 26px;
      font-weight: 600
  }

  .hero h1 {
      font-size: clamp(2.2rem, 5.5vw, 3.8rem);
      margin-bottom: 24px;
      font-weight: 700;
      line-height: 1.12
  }

  .hero h1 .it {
      color: var(--gold-bright)
  }

  .hero .sub {
      font-size: clamp(1.05rem, 2vw, 1.28rem);
      color: rgba(244, 237, 224, .78);
      max-width: 660px;
      margin: 0 auto 40px;
      font-weight: 330
  }

  /* moldura da VSL */
  .vsl {
      position: relative;
      max-width: 760px;
      margin: 0 auto 36px;
      aspect-ratio: 16/9;
      border-radius: 4px;
      border: 1px solid var(--line-dark);
      background: linear-gradient(160deg, #231923, #15101400);
      background-color: #191217;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .9), 0 0 0 8px rgba(244, 237, 224, .02);
      overflow: hidden
  }

  .vsl::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(201, 162, 75, .10), transparent 60%)
  }

  .vsl .play {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      border: 1px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      background: rgba(201, 162, 75, .10);
      transition: .3s
  }

  .vsl:hover .play {
      background: rgba(201, 162, 75, .2)
  }

  .vsl .play svg {
      width: 24px;
      height: 24px;
      margin-left: 4px;
      fill: var(--gold)
  }

  .vsl .vsl-label {
      position: relative;
      z-index: 2;
      margin-top: 18px;
      font-size: 13px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(244, 237, 224, .5)
  }

  .trust {
      font-size: 14.5px;
      color: rgba(244, 237, 224, .62);
      margin-top: 30px;
      letter-spacing: .01em
  }

  .trust b {
      color: var(--ivory);
      font-weight: 600
  }

  /* ---------- SEÇÕES BASE ---------- */
  section {
      position: relative
  }

  .sec {
      padding: clamp(70px, 9vw, 120px) 0
  }

  .eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 12.5px;
      letter-spacing: .28em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 22px
  }

  .eyebrow .num {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 15px
  }

  .eyebrow .rule {
      height: 1px;
      width: 54px;
      background: currentColor;
      opacity: .4
  }

  .h-lead {
      font-size: clamp(1.9rem, 4.4vw, 3.1rem);
      font-weight: 360;
      max-width: 18ch;
      line-height: 1.1
  }

  .lead-p {
      font-size: clamp(1.05rem, 1.8vw, 1.2rem);
      max-width: 60ch;
      margin-top: 24px
  }

  /* fundo escuro (caverna) */
  .dark {
      background: var(--cave);
      color: var(--ivory)
  }

  .dark .eyebrow {
      color: var(--gold)
  }

  .dark .lead-p {
      color: rgba(244, 237, 224, .76)
  }

  /* transição */
  .dusk {
      background: linear-gradient(180deg, var(--cave), #3a2a2e 60%, var(--ivory));
      color: var(--ivory)
  }

  /* fundo claro (luz) */
  .light {
      background: var(--ivory);
      color: var(--ink)
  }

  .light .eyebrow {
      color: var(--rose)
  }

  .light .lead-p {
      color: var(--ink-soft)
  }

  .light-2 {
      background: var(--ivory-2);
      color: var(--ink)
  }

  .light-2 .eyebrow {
      color: var(--rose)
  }

  .light-2 .lead-p {
      color: var(--ink-soft)
  }

  /* ---------- IDENTIFICAÇÃO (sombras) ---------- */
  .shadows {
      margin-top: 46px;
      display: grid;
      gap: 0;
      border-top: 1px solid var(--line-dark)
  }

  .shadows .ln {
      padding: 22px 4px;
      border-bottom: 1px solid var(--line-dark);
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 330;
      font-size: clamp(1.15rem, 2.4vw, 1.55rem);
      color: rgba(244, 237, 224, .9);
      display: flex;
      gap: 20px;
      align-items: baseline
  }

  .shadows .ln span {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: 13px;
      color: var(--gold);
      letter-spacing: .1em;
      flex: none;
      padding-top: 6px
  }

  .verdict {
      margin-top: 42px;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.3rem, 2.8vw, 1.9rem);
      font-weight: 600;
      color: var(--ivory)
  }

  .verdict .gold {
      font-style: italic
  }

  /* ---------- A MENTIRA ---------- */
  .lie {
      text-align: center
  }

  .lie .small {
      font-size: 13px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--rose-soft);
      margin-bottom: 30px
  }

  .lie .quote {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(2rem, 6vw, 4rem);
      line-height: 1.12;
      color: var(--ivory);
      max-width: 16ch;
      margin: 0 auto;
      position: relative
  }

  .lie .quote::before,
  .lie .quote::after {
      content: '"';
      color: var(--gold);
      opacity: .5
  }

  .lie .after {
      margin-top: 36px;
      font-size: 1.15rem;
      color: rgba(244, 237, 224, .72);
      max-width: 46ch;
      margin-left: auto;
      margin-right: auto
  }

  /* ---------- CÉREBRO CAVERNA / mecanismo problema ---------- */
  .mech-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 56px;
      border: 1px solid var(--line-dark)
  }

  .mech {
      padding: 40px 32px;
      border-right: 1px solid var(--line-dark);
      position: relative
  }

  .mech:last-child {
      border-right: none
  }

  .mech .mn {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 2.4rem;
      color: var(--gold);
      opacity: .85;
      margin-bottom: 20px;
      display: block
  }

  .mech h3 {
      font-size: 1.4rem;
      margin-bottom: 14px;
      font-weight: 400
  }

  .mech p {
      font-size: .98rem;
      color: rgba(244, 237, 224, .66);
      line-height: 1.55
  }

  .trap {
      margin-top: 54px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center
  }

  .trap .big {
      font-family: 'Fraunces', serif;
      font-size: clamp(1.6rem, 3.4vw, 2.4rem);
      font-weight: 340;
      line-height: 1.18
  }

  .plato {
      border-left: 2px solid var(--gold);
      padding: 8px 0 8px 28px;
      font-style: italic;
      font-family: 'Fraunces', serif;
      font-size: 1.18rem;
      color: rgba(244, 237, 224, .82);
      line-height: 1.5
  }

  .plato cite {
      display: block;
      font-style: normal;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold);
      margin-top: 18px;
      opacity: .8
  }

  /* ---------- A VIRADA ---------- */
  .turn {
      text-align: center;
      position: relative;
      overflow: hidden
  }

  .turn .glow {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 760px;
      height: 560px;
      background: radial-gradient(ellipse, rgba(201, 162, 75, .22), transparent 65%);
      filter: blur(10px);
      z-index: 0;
      pointer-events: none
  }

  .turn .inner {
      position: relative;
      z-index: 2;
      max-width: 780px;
      margin: 0 auto
  }

  .turn h2 {
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 340;
      line-height: 1.12
  }

  .turn .punch {
      margin-top: 40px;
      padding-top: 34px;
      border-top: 1px solid var(--line-dark);
      font-size: 1.18rem;
      color: rgba(244, 237, 224, .84);
      font-style: normal
  }

  .turn .punch b {
      color: var(--gold);
      font-weight: 600
  }

  /* ---------- AS 3 CHAVES (luz) ---------- */
  .keys {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      margin-top: 56px
  }

  .key {
      background: #fff;
      border: 1px solid var(--line-light);
      border-radius: 4px;
      padding: 38px 30px;
      transition: .4s cubic-bezier(.2, .7, .2, 1)
  }

  .key:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 50px -28px rgba(42, 33, 39, .4)
  }

  .key .ico {
      width: 46px;
      height: 46px;
      margin-bottom: 24px;
      stroke: var(--rose);
      fill: none;
      stroke-width: 1.3
  }

  .key .kn {
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--rose);
      font-weight: 600;
      margin-bottom: 10px
  }

  .key h3 {
      font-size: 1.5rem;
      margin-bottom: 12px;
      color: var(--ink);
      font-weight: 420
  }

  .key p {
      font-size: 1rem;
      color: var(--ink-soft)
  }

  /* ---------- EXPERT ---------- */
  .expert {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 60px;
      align-items: center
  }

  .portrait {
      aspect-ratio: 4/5;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, var(--cave-3), var(--cave));
      border: 1px solid var(--line-light)
  }

  .portrait::after {
      content: none
  }

  .portrait-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      z-index: 1
  }

  .portrait .ph-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 60% 30%, rgba(201, 162, 75, .18), transparent 60%);
      z-index: 2
  }

  .expert .ex-name {
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 360;
      margin: 10px 0 6px
  }

  .expert .role {
      font-size: 14px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--rose);
      font-weight: 600;
      margin-bottom: 26px
  }

  .expert p {
      color: var(--ink-soft);
      margin-bottom: 18px;
      font-size: 1.06rem
  }

  .creds {
      display: flex;
      gap: 36px;
      margin-top: 30px;
      flex-wrap: wrap
  }

  .cred .n {
      font-family: 'Fraunces', serif;
      font-size: 2.3rem;
      color: var(--ink);
      line-height: 1
  }

  .cred .l {
      font-size: 13px;
      color: var(--ink-soft);
      margin-top: 6px;
      max-width: 16ch
  }

  /* ---------- OFERTA / dentro ---------- */
  .incl {
      margin-top: 50px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--line-light)
  }

  .incl .item {
      padding: 30px 30px 30px 0;
      border-bottom: 1px solid var(--line-light);
      display: flex;
      gap: 22px
  }

  .incl .item:nth-child(odd) {
      padding-right: 48px;
      border-right: 1px solid var(--line-light)
  }

  .incl .item:nth-child(even) {
      padding-left: 48px
  }

  .incl .item:last-child:nth-child(odd) {
      grid-column: 1/-1;
      border-right: none;
      padding-right: 0
  }

  .incl . in {
      font-family: 'Fraunces', serif;
      font-style: italic;
      color: var(--rose);
      font-size: 1.3rem;
      flex: none;
      line-height: 1.3
  }

  .incl h4 {
      font-size: 1.22rem;
      color: var(--ink);
      margin-bottom: 6px;
      font-weight: 480
  }

  .incl p {
      font-size: .97rem;
      color: var(--ink-soft)
  }

  /* ---------- ACORDADAS manifesto ---------- */
  .manifesto {
      text-align: center;
      position: relative
  }

  .manifesto .label {
      font-size: 13px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 26px
  }

  .manifesto .big {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(1.7rem, 4vw, 3rem);
      line-height: 1.22;
      max-width: 24ch;
      margin: 0 auto;
      color: var(--ivory)
  }

  .manifesto .big .gold {
      font-style: italic
  }

  .manifesto .env {
      margin-top: 46px;
      max-width: 54ch;
      margin-left: auto;
      margin-right: auto;
      color: rgba(244, 237, 224, .74);
      font-size: 1.08rem
  }

  /* ---------- PREÇO ---------- */
  .price-sec {
      position: relative
  }

  .anchor-line {
      text-align: center;
      color: var(--ink-soft);
      margin: 30px auto 0;
      font-size: 1.04rem
  }

  .anchor-line s {
      text-decoration-color: var(--rose);
      opacity: .7;
      margin: 0 3px
  }

  .plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1000px;
      margin: 46px auto 0;
      align-items: stretch
  }

  .plan {
      background: #fff;
      border: 1px solid var(--line-light);
      border-radius: 8px;
      padding: 40px 28px 34px;
      display: flex;
      flex-direction: column;
      text-align: center;
      position: relative;
      transition: .35s cubic-bezier(.2, .7, .2, 1)
  }

  .plan:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 54px -30px rgba(42, 33, 39, .4)
  }

  .plan .pl-tag {
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--rose);
      margin-bottom: 18px
  }

  .plan .pl-price {
      font-family: 'Fraunces', serif;
      font-size: 3rem;
      color: var(--ink);
      line-height: 1;
      font-weight: 420
  }

  .plan .pl-price .c {
      font-size: 1.2rem;
      vertical-align: top;
      margin-right: 2px
  }

  .plan .pl-per {
      font-size: .95rem;
      color: var(--ink-soft);
      margin: 8px 0 2px
  }

  .plan .pl-eq {
      font-size: .85rem;
      color: var(--rose);
      margin-bottom: 26px;
      font-weight: 700;
      letter-spacing: .01em
  }

  .plan ul {
      list-style: none;
      text-align: left;
      margin: 0 0 28px;
      display: grid;
      gap: 13px;
      flex: 1
  }

  .plan li {
      font-size: .94rem;
      color: var(--ink-soft);
      padding-left: 26px;
      position: relative;
      line-height: 1.45
  }

  .plan li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 6px;
      width: 11px;
      height: 6px;
      border-left: 1.6px solid var(--rose);
      border-bottom: 1.6px solid var(--rose);
      transform: rotate(-45deg)
  }

  .plan .btn {
      width: 100%;
      padding: 15px
  }

  .plan.popular {
      background: linear-gradient(168deg, #2C2029, #1B141A);
      border-color: var(--gold);
      transform: scale(1.045);
      z-index: 2;
      box-shadow: 0 34px 74px -34px rgba(0, 0, 0, .72)
  }

  .plan.popular:hover {
      transform: scale(1.045) translateY(-6px)
  }

  .plan.popular .pl-tag {
      color: var(--gold-bright)
  }

  .plan.popular .pl-price {
      color: var(--ivory)
  }

  .plan.popular .pl-per {
      color: rgba(244, 237, 224, .7)
  }

  .plan.popular .pl-eq {
      color: var(--gold-bright)
  }

  .plan.popular li {
      color: rgba(244, 237, 224, .84)
  }

  .plan.popular li::before {
      border-color: var(--gold)
  }

  .badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold);
      color: #1B1419;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 7px 18px;
      border-radius: 40px;
      white-space: nowrap;
      box-shadow: 0 8px 20px -8px rgba(201, 162, 75, .7)
  }

  .btn-line {
      background: transparent;
      border: 1px solid var(--ink);
      color: var(--ink)
  }

  .btn-line:hover {
      background: var(--ink);
      color: var(--ivory);
      transform: translateY(-2px)
  }

  .btn-rose {
      background: var(--rose);
      color: #fff
  }

  .btn-rose:hover {
      background: #A5645A;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px -12px rgba(181, 116, 106, .6)
  }

  .founder {
      max-width: 680px;
      margin: 36px auto 0;
      text-align: center;
      font-size: .95rem;
      color: var(--ink-soft);
      border-top: 1px solid var(--line-light);
      padding-top: 24px
  }

  .founder b {
      color: var(--ink)
  }

  /* ---------- GARANTIA ---------- */
  .guarantee {
      display: flex;
      gap: 50px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap
  }

  .seal {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      flex: none;
      position: relative;
      border: 1px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle, rgba(201, 162, 75, .12), transparent 70%)
  }

  .seal .d {
      position: absolute;
      inset: 9px;
      border: 1px dashed rgba(201, 162, 75, .5);
      border-radius: 50%
  }

  .seal .num {
      font-family: 'Fraunces', serif;
      font-size: 3.2rem;
      color: var(--gold);
      line-height: .9
  }

  .seal .num small {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-top: 4px
  }

  .guarantee .txt {
      max-width: 46ch
  }

  .guarantee h3 {
      font-size: 1.8rem;
      font-weight: 360;
      margin-bottom: 14px
  }

  .guarantee p {
      color: rgba(244, 237, 224, .76)
  }

  /* ---------- DUALIDADE ---------- */
  .duo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 54px;
      border: 1px solid var(--line-light)
  }

  .duo .col {
      padding: 46px 40px
  }

  .duo .a {
      background: #efe6d6;
      border-right: 1px solid var(--line-light)
  }

  .duo .b {
      background: #fff;
      position: relative
  }

  .duo .tag {
      font-size: 12.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 24px
  }

  .duo .a .tag {
      color: var(--ink-soft)
  }

  .duo .b .tag {
      color: var(--rose)
  }

  .duo h3 {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 18px;
      color: var(--ink)
  }

  .duo p {
      color: var(--ink-soft);
      font-size: 1.02rem;
      line-height: 1.6
  }

  .duo .b p {
      color: var(--ink)
  }

  .duo .verdict2 {
      text-align: center;
      margin-top: 40px;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.2rem, 2.4vw, 1.6rem);
      color: var(--ink);
      font-weight: 600
  }

  /* ---------- FAQ ---------- */
  .faq {
      max-width: 760px;
      margin: 48px auto 0
  }

  .faq details {
      border-bottom: 1px solid var(--line-light);
      padding: 6px 0
  }

  .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      font-family: 'Poppins', sans-serif;
      font-size: 1.08rem;
      color: var(--ink);
      font-weight: 600
  }

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

  .faq summary .pl {
      flex: none;
      width: 22px;
      height: 22px;
      position: relative;
      transition: .3s
  }

  .faq summary .pl::before,
  .faq summary .pl::after {
      content: "";
      position: absolute;
      background: var(--rose);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
  }

  .faq summary .pl::before {
      width: 14px;
      height: 1.5px
  }

  .faq summary .pl::after {
      width: 1.5px;
      height: 14px;
      transition: .3s
  }

  .faq details[open] summary .pl::after {
      transform: translate(-50%, -50%) rotate(90deg);
      opacity: 0
  }

  .faq details p {
      padding: 0 4px 24px;
      color: var(--ink-soft);
      font-size: 1.02rem;
      max-width: 64ch
  }

  /* ---------- CTA FINAL (porta) ---------- */
  .final {
      text-align: center;
      position: relative;
      overflow: hidden;
      padding: clamp(90px, 12vw, 150px) 0
  }

  .final .door {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: min(520px, 80vw);
      height: 100%;
      z-index: 0;
      pointer-events: none;
      border-radius: 50% 50% 0 0 / 38% 38% 0 0;
      background: radial-gradient(ellipse at center 30%, rgba(230, 200, 121, .4), rgba(201, 162, 75, .10) 40%, transparent 64%)
  }

  .final .inner {
      position: relative;
      z-index: 2;
      max-width: 680px;
      margin: 0 auto
  }

  .final h2 {
      font-size: clamp(2.2rem, 6vw, 3.8rem);
      font-weight: 340;
      line-height: 1.08;
      margin-bottom: 24px
  }

  .final p {
      color: rgba(244, 237, 224, .78);
      font-size: 1.15rem;
      margin-bottom: 40px;
      max-width: 46ch;
      margin-left: auto;
      margin-right: auto
  }

  .final .btn {
      font-size: 18px;
      padding: 21px 52px
  }

  .final .scar {
      margin-top: 26px;
      font-size: .92rem;
      color: var(--gold);
      letter-spacing: .04em
  }

  /* ---------- FOOTER ---------- */
  footer {
      background: #150F13;
      color: rgba(244, 237, 224, .5);
      padding: 54px 0 40px;
      border-top: 1px solid var(--line-dark);
      font-size: 13.5px
  }

  footer .ft {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      align-items: flex-start
  }

  footer .brand {
      margin-bottom: 18px
  }

  footer .disc {
      max-width: 60ch;
      line-height: 1.6;
      opacity: .8
  }

  footer .small {
      margin-top: 24px;
      opacity: .6;
      font-size: 12px
  }

  /* ---------- reveal ---------- */
  .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1)
  }

  .reveal.in {
      opacity: 1;
      transform: none
  }

  /* ---------- responsivo ---------- */
  @media(max-width:860px) {
      body {
          font-size: 17px
      }

      .mech-grid,
      .keys,
      .incl,
      .duo,
      .plans {
          grid-template-columns: 1fr
      }

      .plan.popular {
          transform: none
      }

      .plan.popular:hover {
          transform: translateY(-6px)
      }

      .mech {
          border-right: none;
          border-bottom: 1px solid var(--line-dark)
      }

      .mech:last-child {
          border-bottom: none
      }

      .incl .item:nth-child(odd) {
          border-right: none;
          padding-right: 0
      }

      .incl .item:nth-child(even) {
          padding-left: 0
      }

      .incl .item {
          padding: 24px 0
      }

      .trap {
          grid-template-columns: 1fr;
          gap: 30px
      }

      .expert {
          grid-template-columns: 1fr;
          gap: 34px
      }

      .portrait {
          max-width: 360px;
          margin: 0 auto
      }

      .duo .a {
          border-right: none;
          border-bottom: 1px solid var(--line-light)
      }

      .duo .col {
          padding: 36px 28px
      }

      .nav .brand {
          font-size: 12px
      }

      .btn {
          padding: 13px 22px
      }

      .guarantee {
          gap: 34px
      }
  }

  @media(max-width:640px) {
      body {
          font-size: 16px
      }

      .wrap {
          padding: 0 16px
      }

      .hero {
          padding: 120px 0 60px
      }

      .hero .sub {
          font-size: 1rem
      }

      .sec {
          padding: clamp(50px, 8vw, 80px) 0
      }

      .h-lead {
          font-size: clamp(1.55rem, 5vw, 2rem);
          max-width: 100%
      }

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

      .guarantee .txt {
          max-width: 100%
      }

      .plans {
          max-width: 100%
      }

      .plan {
          padding: 30px 22px 26px
      }

      .founder {
          font-size: .9rem
      }

      .creds {
          gap: 20px
      }

      .duo .col {
          padding: 28px 18px
      }

      .faq summary {
          font-size: 1rem;
          padding: 18px 4px
      }

      .final .btn {
          font-size: 16px;
          padding: 17px 34px
      }

      footer .ft {
          flex-direction: column;
          gap: 20px
      }

      .manifesto .big {
          font-size: clamp(1.5rem, 4.5vw, 2rem)
      }

      .trap .big {
          font-size: clamp(1.4rem, 4vw, 1.8rem)
      }

      .lie .quote {
          font-size: clamp(1.7rem, 6vw, 2.6rem)
      }
  }

  @media(max-width:480px) {
      .hero {
          padding: 100px 0 50px
      }

      .hero h1 {
          font-size: 1.9rem
      }

      .sec {
          padding: 50px 0
      }

      .final {
          padding: 70px 0
      }

      .creds {
          flex-direction: column;
          gap: 14px
      }

      .cred {
          display: flex;
          align-items: baseline;
          gap: 12px
      }

      .cred .n {
          font-size: 1.8rem
      }

      .duo .col {
          padding: 24px 14px
      }

      .plans {
          gap: 12px
      }

      .mech {
          padding: 30px 22px
      }

      .plato {
          padding: 6px 0 6px 18px
      }

      .shadows .ln {
          font-size: 1.05rem
      }

      .guarantee {
          gap: 26px
      }

      .seal {
          width: 130px;
          height: 130px
      }

      .seal .num {
          font-size: 2.6rem
      }

      .vsl {
          aspect-ratio: 16/9
      }

      .keys {
          gap: 16px
      }

      .key {
          padding: 28px 20px
      }

      .portrait {
          max-width: 280px
      }
  }

  @media(prefers-reduced-motion:reduce) {
      .reveal {
          opacity: 1;
          transform: none;
          transition: none
      }

      .hero .glow,
      .turn .glow {
          animation: none
      }

      html {
          scroll-behavior: auto
      }
  }

  /* ========== ANIMAÇÕES ========== */

  @keyframes gold-shimmer {
      0% { background-position: 0% }
      100% { background-position: 200% }
  }

  @keyframes float {
      0%, 100% { transform: translateY(0) }
      50% { transform: translateY(-13px) }
  }

  @keyframes pulse-ring {
      0% {
          box-shadow: 0 0 0 0 rgba(201,162,75,.55),
                      0 14px 34px -10px rgba(201,162,75,.4)
      }
      70% {
          box-shadow: 0 0 0 18px rgba(201,162,75,0),
                      0 14px 34px -10px rgba(201,162,75,.4)
      }
      100% {
          box-shadow: 0 0 0 0 rgba(201,162,75,0),
                      0 14px 34px -10px rgba(201,162,75,.4)
      }
  }

  @keyframes slide-up-fade {
      from { opacity: 0; transform: translateY(18px) }
      to   { opacity: 1; transform: translateY(0) }
  }

  /* Barra de progresso */
  #progress-bar {
      position: fixed;
      top: 0; left: 0;
      height: 2px;
      width: 0%;
      background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold));
      z-index: 10000;
      pointer-events: none;
      transition: width .12s linear
  }

  /* Shimmer dourado no hero h1 */
  .hero h1 .it {
      background: linear-gradient(90deg,
          var(--gold-bright) 0%,
          #fffce0 38%,
          var(--gold) 56%,
          var(--gold-bright) 100%
      );
      background-size: 200%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gold-shimmer 4s linear infinite
  }

  /* Linha do eyebrow animada */
  .eyebrow.reveal .rule {
      width: 0;
      opacity: 0;
      transition: width .7s cubic-bezier(.4,0,.2,1) .45s,
                  opacity .4s ease .45s
  }

  .eyebrow.reveal.in .rule {
      width: 54px;
      opacity: .4
  }

  /* Selo flutuante */
  .seal.floated {
      animation: float 5.5s ease-in-out infinite
  }

  /* Pulse no CTA principal */
  .btn-gold.pulsing {
      animation: pulse-ring 2.6s cubic-bezier(.4,0,.6,1) infinite
  }

  /* Hover mech card */
  .mech {
      transition: background .35s ease
  }
  .mech:hover {
      background: rgba(201,162,75,.05)
  }

  /* Ícone da chave rotaciona */
  .key .ico {
      transition: transform .5s cubic-bezier(.2,.7,.2,1), stroke .4s ease
  }
  .key:hover .ico {
      transform: scale(1.22) rotate(-8deg);
      stroke: var(--gold)
  }

  /* Spotlight nos planos (mouse-follow) */
  .plan::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 8px;
      background: radial-gradient(
          circle at var(--mx, 50%) var(--my, 50%),
          rgba(201,162,75,.13),
          transparent 55%
      );
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none
  }
  .plan:hover::before { opacity: 1 }

  /* Portrait hover suave */
  .portrait {
      transition: transform .5s cubic-bezier(.2,.7,.2,1),
                  box-shadow .5s ease
  }
  .portrait:hover {
      transform: scale(1.025);
      box-shadow: 0 40px 90px -40px rgba(0,0,0,.55)
  }

  /* Hover nas linhas de identificação */
  .shadows .ln {
      transition: background .25s ease, padding-left .3s ease
  }
  .shadows .ln:hover {
      background: rgba(244,237,224,.045);
      padding-left: 14px
  }

  /* Hover no FAQ */
  .faq details {
      transition: background .3s ease;
      border-radius: 4px
  }
  .faq details:hover { background: rgba(42,33,39,.04) }

  /* Shimmer no manifesto dourado */
  .manifesto .big .gold {
      background: linear-gradient(90deg,
          var(--gold-deep) 0%,
          var(--gold-bright) 40%,
          var(--gold) 60%,
          var(--gold-bright) 100%
      );
      background-size: 200%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gold-shimmer 6s linear infinite
  }

  /* Desabilitar animações extras em prefers-reduced-motion */
  @media(prefers-reduced-motion:reduce) {
      .hero h1 .it {
          animation: none;
          background: none;
          -webkit-text-fill-color: var(--gold-bright);
          color: var(--gold-bright)
      }
      .manifesto .big .gold {
          animation: none;
          background: none;
          -webkit-text-fill-color: var(--gold);
          color: var(--gold)
      }
      .eyebrow.reveal .rule {
          width: 54px;
          opacity: .4;
          transition: none
      }
      .seal.floated { animation: none }
      .btn-gold.pulsing { animation: none }
      .shadows .ln { transition: none }
      .mech { transition: none }
  }