  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  :root {
      --primary-dark: #000f2d;
      --primary-light: #00a2e5;
      --accent-yellow: #f7d10a;
      --white: #ffffff;
      --light-gray: #f8f9fa;
      --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  html {
      scroll-behavior: smooth;
  }

  /* === BARRA FIXA NO TOPO (STICKY) === */
  .sticky-cta-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: var(--primary-dark);
      color: var(--white);
      padding: 15px 0;
      z-index: 1000;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  .sticky-cta-bar.visible {
      transform: translateY(0);
  }

  .sticky-cta-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .sticky-cta-text {
      font-size: 1rem;
      font-weight: 500;
      margin-right: 20px;
  }

  .sticky-cta-button {
      background: var(--accent-yellow);
      color: var(--primary-dark);
      padding: 12px 30px;
      font-size: 1rem;
      font-weight: 700;
      font-family: 'Montserrat', sans-serif;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
  }

  .sticky-cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(247, 209, 10, 0.3);
  }

  body {
      font-family: 'Inter', sans-serif;
      line-height: 1.5;
      color: var(--primary-dark);
      overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      line-height: 1.2;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  /* === HEADER / HERO SECTION === */
  .hero-section {
      position: relative;
      overflow: hidden;
      background-color: var(--primary-dark);
      color: var(--white);
      padding: 50px 0;
      height: 40rem;
      display: flex;
      align-items: center;
      flex-direction: column;
  }

  .border_bottom {
      border-bottom: #f7d10a solid 3px;
      width: 80%;
      position: relative;
      top: 200px;
  }

  .hero-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-top: 50px;
  }

  .hero-text h1 {
      font-size: 3.5rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 30px;
      letter-spacing: -0.02em;
      color: #f7d10a;
  }

  .hero-text p {
      font-size: 1.25rem;
      font-weight: 400;
      margin-bottom: 40px;
      opacity: 0.9;
  }

  .video-card {
      border-radius: 20px;
      padding: 20px;
      text-align: center;
  }

  .video-placeholder {
      width: 100%;
      height: 280px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
  }

  .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 2;
      pointer-events: auto;
      font-size: 3rem;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      padding: 20px;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .video-placeholder:hover .play-button,
  .video-placeholder:focus-within .play-button {
      opacity: 1;
  }

  .video-placeholder video {
      display: block;
      width: 100%;
      border-radius: 12px;
  }

  .rating-seal {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--primary-dark);
      font-weight: 500;
  }

  .stars {
      color: var(--accent-yellow);
      font-size: 1.2rem;
  }


  #result1 {
      background: url("../assets/D5E71744-C627-4981-801E-A2AE98686672.jpg");
      background-position: center;
      background-size: cover;
  }

  #result2 {
      background: url("../assets/6ee71bda-17d4-42ea-95fe-9afa08842818.jpg");
      background-position: center;
      background-size: cover;
  }



  /* === SEÇÃO DE BENEFÍCIOS === */
  .benefits-section {
      padding: 100px 0;
      background: var(--light-gray);
  }

  .section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 60px;
      color: var(--primary-dark);
  }

  .benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
  }

  .benefit-card {
      background: var(--white);
      padding: 40px 30px;
      border-radius: 20px;
      text-align: center;
      box-shadow: var(--shadow-light);
      transition: transform 0.3s ease;
  }

  .benefit-card:hover {
      transform: translateY(-5px);
  }

  .benefit-icon {
      font-size: 3rem;
      color: var(--primary-light);
      margin-bottom: 20px;
  }

  .benefit-card h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      color: var(--primary-dark);
  }

  .benefit-card p {
      color: #666;
      font-size: 1rem;
  }

  /* === SEÇÃO DE PROVA SOCIAL === */
  .social-proof-section {
      padding: 100px 0;
      background: var(--primary-dark);
      color: var(--white);
  }

  .social-proof-section .section-title {
      color: var(--white);
  }

  .results-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      margin-bottom: 80px;
  }

  .result-card {
      background: var(--white);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-light);
  }

  .result-image {
      width: 100%;
      height: 430px;
      background: url("../assets/0B6D7B82-4544-47D1-9B8C-466785B091FF.jpg");
      background-position: center;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 1.1rem;
  }

  .result-caption {
      padding: 20px;
      color: var(--primary-dark);
      font-weight: 500;
      text-align: center;
  }

  .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
  }

  .testimonial-card {
      background: rgba(255, 255, 255, 0.1);
      padding: 30px;
      border-radius: 15px;
      position: relative;
  }

  .testimonial-card::before {
      content: '"';
      font-size: 4rem;
      color: var(--accent-yellow);
      position: absolute;
      top: -10px;
      left: 20px;
      font-family: 'Montserrat', sans-serif;
  }

  .testimonial-text {
      font-style: italic;
      margin-bottom: 15px;
      padding-left: 20px;
  }

  .testimonial-author {
      font-weight: 500;
      color: var(--accent-yellow);
  }


  .testimonial-author {
      font-weight: 500;
      color: var(--accent-yellow);
  }

  /* === SEÇÃO DE FEEDBACKS === */
  .feedbacks-container {
      margin-top: 80px;
  }

  .feedbacks-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 60px;
      color: var(--white);
  }

  .feedbacks-title strong {
      color: var(--accent-yellow);
  }

  .feedbacks-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
  }

  .feedback-card {
      background: var(--white);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: var(--shadow-light);
      transition: transform 0.3s ease;
  }

  .feedback-card:hover {
      transform: translateY(-5px);
  }


  .feedback-image {
      width: 100%;
      height: auto;
      min-height: 400px;
      background: var(--light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 1rem;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      padding: 20px;
  }

  #feedback1 {
      background-image: url("../assets/IMG_6673.PNG");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }

  #feedback2 {
      background-image: url("../assets/IMG_6352.PNG");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }

  #feedback3 {
      background-image: url("../assets/IMG_6638.PNG");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }

  #feedback4 {
      background-image: url("../assets/IMG_6674.PNG");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }

    #feedback5 {
      background-image: url("../assets/DEPOIMENTO1.jpg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }

    #feedback6 {
      background-image: url("../assets/depoimento6.jpeg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }



  /* === SEÇÃO DE BÔNUS === */
  .bonus-section {
      padding: 100px 0;
      background: var(--light-gray);
      position: relative;
  }

  .bonus-banner {
      background: var(--accent-yellow);
      color: var(--primary-dark);
      text-align: center;
      padding: 15px;
      font-weight: 700;
      font-size: 1.2rem;
      letter-spacing: 0.05em;
      margin-bottom: 60px;
      border-radius: 20px;
  }

  .bonus-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
  }

  .ebook-mockup {
      background: var(--primary-dark);
      height: 400px;
      border-radius: 20px;
      box-shadow: var(--shadow-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-dark);
      font-size: 1.2rem;
      font-weight: 500;
      position: relative;
      transform: perspective(1000px) rotateY(-15deg);
  }

  .books-container {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      height: 100%;
  }

  .book {
      width: 220px;
      height: 280px;
      border-radius: 8px;
      position: relative;
      transform: perspective(600px) rotateY(-10deg);
      box-shadow:
          2px 2px 10px rgba(0, 0, 0, 0.3),
          inset -2px 0 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
      background-size: cover;
      background-position: center;
  }

  .book:hover {
      transform: perspective(600px) rotateY(-5deg) translateY(-5px);
  }

  .book-1 {
      background: url("../assets/CAPA-PlanoAlimentar.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
  }

  .book-1::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 10px;
      right: 10px;
      height: 40px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .book-1::after {
      content: '';
      position: absolute;
      top: 20px;
      left: 15px;
      right: 15px;
      font-size: 8px;
      font-weight: bold;
      color: white;
      text-align: center;
      line-height: 1.2;
      white-space: pre-line;
  }

  .book-2 {
      background: url("../assets/Capa-EbookReceitas.PNG");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
  }

  .book-2::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 10px;
      right: 10px;
      height: 30px;
      border-radius: 4px;
  }

  .book-2::after {
      content: '';
      position: absolute;
      top: 20px;
      left: 15px;
      right: 15px;
      font-size: 9px;
      font-weight: bold;
      color: black;
      text-align: center;
      line-height: 1.2;
      white-space: pre-line;
  }

  /* Spine effect for books */
  .book::before {
      z-index: 1;
  }

  .book::after {
      z-index: 2;
  }

  .bonus-list h3 {
      font-size: 2rem;
      margin-bottom: 30px;
      color: var(--primary-dark);

  }

  .bonus-item {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
      border-bottom: solid 1px #000f2d;
      padding: 5px;
  }

  .bonus-item i {
      color: var(--primary-light);
      font-size: 1.2rem;
      margin-top: 2px;
  }

  .bonus-item span {
      font-size: 1.1rem;
      line-height: 1.4;
  }

  /* === SEÇÃO DE OFERTA E CTA === */

  .offer-content-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 40px;
  }

  .offer-left {
      display: flex;
      flex-direction: column;
      gap: 30px;
  }

  .offer-right {
      position: relative;
      height: 500px;
      overflow: hidden;
  }

  .products-showcase {
      position: relative;
      width: 100%;
      height: 100%;
      perspective: 1000px;
  }

  /* Dispositivos */
  .devices-group {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .device {
      position: absolute;
      filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
      animation: float 6s ease-in-out infinite;
  }

  /* Laptop */
  .laptop {
      top: 20px;
      left: 50px;
      transform: rotateY(-15deg) rotateX(10deg);
      animation-delay: 0s;
  }

  .laptop-screen {
      width: 240px;
      height: 180px;
      background: url("../assets/desfio\ 21\ dias.jpeg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px 8px 0 0;
      border: 3px solid #1a1a1a;
      position: relative;
      overflow: hidden;
  }

  .laptop-base {
      width: 260px;
      height: 8px;
      background: linear-gradient(135deg, #34495e, #2c3e50);
      border-radius: 0 0 15px 15px;
      margin-top: -2px;
      position: relative;
      left: -10px;
  }

  /* Tablet */
  .tablet {
      top: 150px;
      right: 80px;
      transform: rotateY(20deg) rotateX(-10deg);
      animation-delay: -2s;
  }

  .tablet-screen {
      width: 140px;
      height: 190px;
      background: url("../assets/capa\ desafio\ 21\ dias.jpeg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 12px;
      border: 4px solid #1a1a1a;
      position: relative;
      overflow: hidden;
  }

  /* Phone */
  .phone {
      top: 80px;
      right: 20px;
      transform: rotateY(25deg) rotateX(5deg);
      animation-delay: -4s;
  }

  .phone-screen {
      width: 70px;
      height: 110px;
      background: url("../assets/planner.jpeg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 15px;
      border: 3px solid #1a1a1a;
      position: relative;
      overflow: hidden;
  }

  .screen-content {
      width: 100%;
      height: 100%;
      background: url("../assets/desfio\ 21\ dias.jpeg");
      opacity: 0.3;
      position: relative;
  }



  /* E-books */
  .ebooks-group {
      position: absolute;
      bottom: 10px;
      left: 60px;
      display: flex;
      gap: 15px;
  }

  .ebook {
      position: relative;
      filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.3));
      animation: float 8s ease-in-out infinite;
  }

  .ebook-1 {
      animation-delay: -1s;
      transform: rotate(-10deg);
      background: url("../assets/CAPA-PlanoAlimentar.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      right: 50px;
  }

  .ebook-2 {
      animation-delay: -3s;
      transform: rotate(5deg);
      position: relative;
      top: 50px;
      right: 150px;
      background: url("../assets/Capa-EbookReceitas.PNG");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  }

  .ebook-cover {
      width: 240px;
      height: 260px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: 4px;
      position: relative;
      border: 2px solid rgba(255, 255, 255, 0.1);
  }


  .ebook-spine {
      width: 8px;
      height: 80px;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      position: absolute;
      right: -8px;
      top: 0;
      border-radius: 0 4px 4px 0;
  }

  /* Elementos ilustrativos */
  .illustration-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
  }

  .element {
      position: absolute;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--accent), var(--primary-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: white;
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
      animation: pulse 4s ease-in-out infinite;
  }

  .dumbbell {
      top: 50px;
      right: 150px;
      animation-delay: 0s;
  }

  .food-plate {
      bottom: 120px;
      right: 50px;
      animation-delay: -1s;
  }

  .timer {
      top: 180px;
      left: 120px;
      animation-delay: -2s;
  }

  .trophy {
      bottom: 80px;
      left: 80px;
      animation-delay: -3s;
  }

  /* Elementos flutuantes decorativos */
  .floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
  }

  .float-element {
      position: absolute;
      border-radius: 50%;
      animation: float 10s ease-in-out infinite;
  }

  .float-1 {
      width: 210px;
      height: 110px;
      top: 380px;
      right: 10px;
      animation-delay: 0s;
  }

  .float-2 {
      width: 60px;
      height: 60px;
      bottom: 40px;
      right: 120px;
      animation-delay: -2s;
  }

  .float-3 {
      width: 280px;
      height: 280px;
      top: 50%;
      left: 150px;
      animation-delay: -4s;
  }

  /* Animações */
  @keyframes float {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg);
      }

      50% {
          transform: translateY(-20px) rotate(5deg);
      }
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.1);
      }
  }


  .cta-section {
      background: var(--primary-dark);
      color: var(--white);
      padding: 100px 0;
      text-align: center;
  }

  .price-stack {
      margin-bottom: 40px;
  }

  .price-highlight {
      text-align: center;
      color: #fff;
      margin-bottom: 2rem;
  }

  .crossed-prices span {
      text-decoration: line-through;
      opacity: 0.6;
      margin: 0 5px;
  }

  .offer-text {
      font-size: 1.5rem;
      margin: 1rem 0;
      color: #ffd700;
  }

  .price-big {
      font-size: 2.5rem;
      font-weight: bold;
  }

  .price-bold {
      font-size: 2rem;
      font-weight: bold;
  }

  .no-subscription {
      font-size: 0.9rem;
      color: #ccc;
  }

  .included-items {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
  }

  .d-flex {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* alinha os itens da coluna à esquerda */
      width: 50%;
  }

  .included-item {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      font-size: 1.1rem;
  }



  .included-item i {
      color: var(--accent-yellow);
      font-size: 1.2rem;
  }

  .cta-button {
      position: relative;
      background: var(--accent-yellow);
      color: var(--primary-dark);
      padding: 30px 70px;
      font-size: 1.6rem;
      font-weight: 800;
      font-family: 'Montserrat', sans-serif;
      
      border-radius: 60px;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-decoration: none;
      display: inline-block;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow:
          0 8px 25px rgba(247, 209, 10, 0.4),
          0 15px 35px rgba(0, 162, 229, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      animation: pulse 2.5s infinite, shake 0.8s infinite;
      text-shadow: 1px 1px 2px rgba(0, 15, 45, 0.2);
  }

  /* Efeito de brilho que passa pelo botão */
  .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      transition: left 0.6s ease;
  }

  .cta-button:hover::before {
      left: 100%;
  }

  /* Efeito de ondas internas */
  .cta-button::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;

      transform: translate(-50%, -50%);
      transition: all 0.5s ease;
      border-radius: 50%;
      pointer-events: none;
  }

  .cta-button:hover::after {
      width: 400px;
      height: 400px;
  }

  .cta-button:hover {
      transform: translateY(-10px) scale(1.08);
      background: var(--accent-yellow);
  
      border-color: var(--accent-yellow);
      box-shadow:
          0 20px 40px rgba(247, 209, 10, 0.6),
          0 25px 50px rgba(0, 162, 229, 0.4),
          inset 0 2px 0 rgba(0, 162, 229, 0.2);
      animation: pulse 1s infinite, vibrate 0.1s infinite;
  }

  .cta-button:active {
      transform: translateY(-5px) scale(1.05);
      transition: all 0.1s;
  }

  .cta-text {
      position: relative;
      z-index: 2;
      display: inline-block;
      animation: textGlow 2s ease-in-out infinite alternate;
  }

  .guarantee-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      opacity: 0.9;
  }

  .guarantee-seal {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
  }

  .guarantee-seal i {
      color: var(--accent-yellow);
      font-size: 1.5rem;
  }

  .security-text {
      font-size: 0.9rem;
      opacity: 0.7;
  }

  /* === FOOTER === */
  .footer {
      background: var(--primary-dark);
      color: var(--white);
      padding: 40px 0;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 10%;
      margin-bottom: 120px;
  }

  .btn_cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      margin-top: 40px;
        background: var(--accent-yellow);
      color: var(--primary-dark);
      padding: 25px 60px;
      font-size: 1.4rem;
      font-weight: 700;
      font-family: 'Montserrat', sans-serif;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      text-align: center;
      letter-spacing: 0.02em;
      margin-bottom: 30px;
      display: inline-block;
      text-decoration: none;
  }

  .btn_cta:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(247, 208, 10, 0.103);
  }

  @media (max-width: 1020px) {

    .social-proof-section {
        padding: 40px 0;
    }

    .btn_cta{
        width: 100%;
    }


      .hero-section {
          height: 100%;
      }

      .video-card {
          margin-top: -50px;
      }

      .border_bottom {
          display: none;
      }

      .sticky-cta-content {
          flex-direction: column;
          gap: 15px;
          text-align: center;
      }

      .sticky-cta-text {
          margin-right: 0;
          font-size: 0.9rem;
      }

      .sticky-cta-button {
          padding: 10px 25px;
          font-size: 0.9rem;
      }

      .d-flex {
          width: 60%;
      }

      .cta-button {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .books-container {
          align-items: center;
          justify-content: center;
          width: 100%;
      }

      .book-1,
      .book-2 {
          width: 120px;
          height: 180px;
      }

      .offer-content-wrapper {
          grid-template-columns: 1fr;
          gap: 40px;
      }

      .offer-right {
          height: 300px;
      }

      .laptop {
          transform: scale(0.8) rotateY(-15deg) rotateX(10deg);
      }

      .tablet {
          transform: scale(0.8) rotateY(20deg) rotateX(-10deg);
      }

      .phone {
          transform: scale(0.8) rotateY(25deg) rotateX(5deg);
      }

      .ebook {
          transform: scale(0.7);
      }

      .element {
          width: 30px;
          height: 30px;
          font-size: 14px;
      }

      .ebook-1 {
          right: -50px;
      }


      .ebook-2 {
          right: -10px;
      }

      .ebook-cover {
          width: 90px;
          height: 110px;
      }

  }

  /* === SEÇÃO PARA QUEM É O DESAFIO === */
  .target-audience-section {
      padding: 100px 0;
      background: linear-gradient(135deg, var(--primary-dark) 0%, #001a40 100%);
      color: var(--white);
      position: relative;
      overflow: hidden;
  }

  .target-audience-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23f7d10a" fill-opacity="0.03"><circle cx="30" cy="30" r="1"/></g></g></svg>');
      pointer-events: none;
  }

  .target-audience-section .section-title {
      color: var(--white);
      font-size: 2.8rem;
      margin-bottom: 80px;
      text-align: center;
      position: relative;
      z-index: 2;
  }

  .target-audience-section .section-title strong {
      color: var(--accent-yellow);
  }

  .audience-content {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 2;
  }

  .audience-image {
      position: relative;
  }

  .image-wrapper {
      position: relative;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      transform: perspective(1000px) rotateY(-5deg);
      transition: transform 0.3s ease;
  }

  .image-wrapper:hover {
      transform: perspective(1000px) rotateY(0deg) translateY(-10px);
  }

  .image-wrapper img {
      width: 100%;
      height: 500px;
      object-fit: cover;
      display: block;
  }

  .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 15, 45, 0.7) 100%);
      display: flex;
      align-items: flex-end;
      padding: 30px;
  }

  .frustration-bubble {
      background: rgba(255, 255, 255, 0.95);
      color: var(--primary-dark);
      padding: 20px 25px;
      border-radius: 20px 20px 5px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 500;
      font-size: 1rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      animation: float 3s ease-in-out infinite;
      max-width: 280px;
  }

  .frustration-bubble i {
      color: #e74c3c;
      font-size: 1.3rem;
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0px);
      }

      50% {
          transform: translateY(-10px);
      }
  }

  .audience-checklist {
      display: flex;
      flex-direction: column;
      gap: 25px;
  }

  .checklist-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 25px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      border-left: 4px solid var(--accent-yellow);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateX(50px);
      animation: slideInLeft 0.6s ease forwards;
  }

  .checklist-item[data-delay="0"] {
      animation-delay: 0.1s;
  }

  .checklist-item[data-delay="100"] {
      animation-delay: 0.2s;
  }

  .checklist-item[data-delay="200"] {
      animation-delay: 0.3s;
  }

  .checklist-item[data-delay="300"] {
      animation-delay: 0.4s;
  }

  .checklist-item[data-delay="400"] {
      animation-delay: 0.5s;
  }

  .checklist-item[data-delay="500"] {
      animation-delay: 0.6s;
  }

  @keyframes slideInLeft {
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  .checklist-item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateX(10px);
      box-shadow: 0 10px 30px rgba(247, 209, 10, 0.1);
  }

  .check-icon {
      flex-shrink: 0;
      margin-top: 2px;
  }

  .check-icon i {
      color: var(--accent-yellow);
      font-size: 1.4rem;
      filter: drop-shadow(0 0 5px rgba(247, 209, 10, 0.3));
  }

  .check-content {
      font-size: 1.1rem;
      line-height: 1.5;
  }

  .highlight {
      color: var(--white);
      font-weight: 600;
  }

  .problem {
      color: #ff6b6b;
      font-weight: 500;
      font-style: italic;
  }

  .warning-box {
      margin-top: 40px;
      background: linear-gradient(135deg, var(--accent-yellow) 0%, #ffd700 100%);
      color: var(--primary-dark);
      padding: 30px;
      border-radius: 20px;
      display: flex;
      align-items: flex-start;
      gap: 20px;
      box-shadow: 0 15px 40px rgba(247, 209, 10, 0.2);
      position: relative;
      overflow: hidden;
  }

  .warning-box::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: shimmer 3s ease-in-out infinite;
  }

  @keyframes shimmer {

      0%,
      100% {
          transform: rotate(0deg);
      }

      50% {
          transform: rotate(180deg);
      }
  }

  .warning-icon {
      flex-shrink: 0;
      margin-top: 2px;
  }

  .warning-icon i {
      font-size: 1.5rem;
      color: var(--primary-dark);
      animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.1);
      }
  }

  .warning-content p {
      font-size: 1.2rem;
      line-height: 1.4;
      margin: 0;
      position: relative;
      z-index: 2;
  }

  .warning-content strong {
      font-weight: 700;
  }

  /* === RESPONSIVIDADE === */
  @media (max-width: 768px) {
      .container {
          padding: 15px 15px 15px 15px;
      }

      .border_bottom {
          display: none;
      }

      .sticky-cta-content {
          flex-direction: column;
          gap: 15px;
          text-align: center;
      }

      .sticky-cta-text {
          margin-right: 0;
          font-size: 0.9rem;
      }

      .sticky-cta-button {
          padding: 10px 25px;
          font-size: 0.9rem;
      }

      .hero-content {
          grid-template-columns: 1fr;
          gap: 40px;
          text-align: center;
      }

      .hero-text h1 {
          font-size: 2.5rem;
      }

      .hero-text p {
          font-size: 1.1rem;
      }

      .benefits-grid {
          grid-template-columns: 1fr;
          gap: 30px;
      }

      .results-grid {
          grid-template-columns: 1fr;
          gap: 30px;
      }

      .testimonials-grid {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .bonus-content {
          grid-template-columns: 1fr;
          gap: 40px;
          text-align: center;
      }

      .ebook-mockup {
          height: 300px;
          transform: none;
      }

      .bonus-list {
          text-align: left;
      }

      .section-title {
          font-size: 2rem;
      }

      .current-price {
          font-size: 3rem;
      }

      .cta-button {
          width: 100%;
          padding: 20px;
          font-size: 1.2rem;
      }

      .included-items {
          text-align: center;
      }

      .included-item {
          justify-content: center;
      }

      .audience-content {
          grid-template-columns: 1fr;
          gap: 60px;
          text-align: center;
      }

      .image-wrapper {
          transform: none;
          max-width: 400px;
          margin: 0 auto;
      }

      .image-wrapper img {
          height: 400px;
      }

      .checklist-item {
          text-align: left;
      }
  }

  @media (max-width: 768px) {
      .target-audience-section {
          padding: 80px 0;
      }

      .target-audience-section .section-title {
          font-size: 2.2rem;
          margin-bottom: 60px;
      }

      .audience-content {
          gap: 40px;
      }

      .image-wrapper img {
          height: 350px;
      }

      .checklist-item {
          padding: 20px;
          gap: 15px;
      }

      .check-content {
          font-size: 1rem;
      }

      .warning-box {
          padding: 25px;
          gap: 15px;
      }

      .warning-content p {
          font-size: 1.1rem;
      }
  }

  @media (max-width: 480px) {
      .target-audience-section .section-title {
          font-size: 1.8rem;
      }

      .frustration-bubble {
          padding: 15px 20px;
          font-size: 0.9rem;
          max-width: 250px;
      }

      .checklist-item {
          padding: 18px;
      }

      .warning-box {
          padding: 20px;
      }

      .warning-content p {
          font-size: 1rem;
      }

      .container {
          padding: 15px 15px 15px 15px;
      }

      .hero-section {
          padding: 60px 0;
      }

      .hero-text h1 {
          font-size: 2rem;
      }

      .benefits-section,
      .social-proof-section,
      .bonus-section,
      .cta-section {
          padding: 60px 0;
      }

      .benefit-card {
          padding: 30px 20px;
      }

      .testimonial-card {
          padding: 20px;
      }

      .bonus-banner {
          font-size: 1rem;
          padding: 12px;
      }
  }

  /* === GUARANTEE SECTION === */
  .guarantee-section {
      background: var(--light-gray);
      padding: 60px 0;
  }

  .guarantee-card {
      background: var(--white);
      border-radius: 20px;
      padding: 40px;
      text-align: center;
      box-shadow: var(--shadow-light);
      max-width: 600px;
      margin: 0 auto;
  }

  .guarantee-card i {
      color: var(--accent-yellow);
      font-size: 3rem;
      margin-bottom: 20px;
  }

  .guarantee-card h3 {
      font-size: 2rem;
      color: var(--primary-dark);
      margin-bottom: 20px;
  }

  .guarantee-card p {
      font-size: 1.1rem;
      color: #444;
  }

  /* === SEALS === */
  .seal-container {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-top: 20px;
      flex-wrap: wrap;
  }

  .seal {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 10px 20px;
      border-radius: 30px;
      color: var(--white);
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
  }

  /* === HOW IT WORKS SECTION === */
  .how-it-works-section {
      background: var(--light-gray);
      padding: 80px 0;
  }

  .how-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
  }

  .step {
      background: var(--white);
      border-radius: 20px;
      padding: 30px;
      text-align: center;
      box-shadow: var(--shadow-light);
      transition: transform 0.3s ease;
  }

  .step:hover {
      transform: translateY(-5px) scale(1.02);
  }

  .step i {
      color: var(--primary-light);
      font-size: 3rem;
      margin-bottom: 20px;
  }

  .step h3 {
      font-size: 1.5rem;
      color: var(--primary-dark);
      margin-bottom: 15px;
  }

  .step p {
      color: #666;
  }

  /* === Hover Improvements === */
  .benefit-card:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  .audio-toggle {
      position: absolute;
      bottom: 16px;
      left: 16px;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 3;
      transition: background 0.2s;
  }

  .audio-toggle:hover {
      background: rgba(0, 0, 0, 0.8);
  }