/* ================================
   🌿 ESTILOS BASE
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background: #000;
  -webkit-font-smoothing: antialiased;
}

/* ================================
   🔹 HERO SECTION
================================ */
.hero {
  width: 100%;
  padding: 40px 15px 20px;
  display: flex;
  justify-content: center;
}

.hero-container {
  max-width: 600px;
  text-align: center;
}

.hero-title {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}

.hero-title .green {
  color: #05a500;
}

.hero-title .strong {
  font-weight: 900;
}

.watch-text {
  font-size: 1rem;
  font-weight: 600;
  margin: 15px 0 20px;
  color: #fff;
}

.video-wrapper {
  width: 100%;
  border: 2px solid #05a500;
  border-radius: 6px;
  overflow: hidden;
}

.video-wrapper video {
  width: 100%;
  display: block;
  border-radius: 6px;
}

/* ================================
   📱 RESPONSIVIDADE HERO
================================ */
@media (min-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .hero-container {
    max-width: 700px;
  }
  .hero-title {
    font-size: 2.3rem;
  }
}

/* ==========================================
   🔴 BOTÃO CTA PRINCIPAL (VERSÃO CORRIGIDA)
========================================== */
.cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  padding: 0 16px;
}

.cta-pulse {
  display: inline-block;
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #ff2f2f, #ff6b00);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 0 20px rgba(255, 60, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pulse 1.8s infinite;
}

.cta-pulse:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 60, 0, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 25px rgba(255, 60, 0, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 60, 0, 0.4);
  }
}

@media (max-width: 480px) {
  .cta-pulse {
    font-size: 1rem;
    padding: 14px 28px;
    width: 100%;
    max-width: 350px;
  }
}

@media (min-width: 768px) {
  .cta-pulse {
    font-size: 1.3rem;
    padding: 18px 50px;
  }
}

/* ==========================================
   SEÇÃO: ¿QUÉ VAS A APRENDER? E SEÇÕES SIMILARES
========================================== */
.learn {
  background: #000;
  padding: 28px 16px 40px;
}

.learn-wrap {
  margin: 0 auto 20px;
  max-width: 680px;
  text-align: left;
}

.learn-title {
  margin: 0 0 18px;
  text-align: center;
  color: #fff;
  font-weight: 900;
  line-height: 1.1;
  font-size: 1.7rem;
}

.learn-card {
  color: #fff;
  text-align: left;
  max-width: 680px;
  margin: 0 auto;
}

.learn-card p {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.55;
}

.learn-card ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.learn-card li {
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 10px;
}

.learn-card li::before {
  content: "👉";
  color: #ffb000;
  margin-right: 10px;
}

.laranja, .hl-orange {
  color: #ff9a00;
  font-weight: 700;
}

.learn-image {
  text-align: center;
  margin-bottom: 30px;
}

.learn-image img {
  width: 100%;
  max-width: 380px;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .learn-title {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  .learn {
    padding: 40px 20px 60px;
  }
  .learn-title {
    font-size: 2rem;
  }
}

/* ==========================================
   📚 SEÇÃO: BENEFÍCIOS DO LIVRO
========================================== */
.benefits-section {
  background: #000;
  padding: 40px 16px;
  text-align: center;
}

.benefits-container {
  max-width: 680px;
  margin: 0 auto;
}

.benefits-image {
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  display: block;
  margin: 0 auto 40px;
  object-fit: cover;
}

.benefits-title {
  color: #ff9a00;
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 30px;
}

.benefits-list p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: left; /* Garante que os parágrafos da lista fiquem alinhados à esquerda */
}

.benefits-list p strong {
  color: #ff9a00;
  font-weight: 700;
}

@media (min-width: 768px) {
  .benefits-section {
    padding: 60px 20px;
  }
  .benefits-title {
    font-size: 2rem;
  }
  .benefits-list p {
    font-size: 1.1rem;
  }
}

/* ==========================================
   🎁 SEÇÃO: BÔNUS DISPONÍVEIS HOJE
========================================== */
.bonus-section {
  background-color: #ffffff;
  color: #333;
  padding: 80px 16px 40px;
  position: relative;
  margin-top: -1px;
}

.section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.section-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}

.section-divider .shape-fill {
  fill: #000000;
}

.bonus-container {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.bonus-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #6a0dad;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 25px;
}

.bonus-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.bonus-intro strong {
  color: #000;
}

@media (min-width: 768px) {
  .bonus-section {
    padding: 120px 20px 60px;
  }
  .bonus-title {
    font-size: 2.1rem;
  }
  .bonus-intro {
    font-size: 1.2rem;
  }
  .section-divider svg {
    height: 120px;
  }
}

/* ==========================================
   ♦️ ESTILOS DOS CARDS DE BÔNUS
========================================== */
.bonus-card {
  background-color: #f8f9fa;
  border: 2px dashed #6a0dad;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  margin-top: 40px;
}

.bonus-card-title {
  font-size: 1.5rem;
  color: #343a40;
  margin-bottom: 15px;
}

.bonus-card-description {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: left;
  color: #343a40;
  margin-bottom: 20px;
}

.bonus-card-image {
  display: block;
  margin: 0 auto 20px;
  max-width: 200px;
  width: 100%;
}

.bonus-card-banner {
  display: block;
  margin: 0 auto 20px;
  max-width: 450px;
  width: 100%;
  border-radius: 12px;
}

.certificate-image-corrected {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.bonus-card-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #343a40;
}

.bonus-card-value .price-old {
  color: #e63946;
  text-decoration: line-through;
}

.bonus-card-value .price-free {
  color: #2a9d8f;
  font-weight: 900;
}

/* ==========================================
   💥 SEÇÃO: OFERTA FINAL UNIFICADA
========================================== */
.final-offer-section {
  background-color: #ffffff;
  padding: 40px 16px;
  text-align: center;
}

.final-offer-container {
  max-width: 800px;
  margin: 0 auto;
}

.price-intro, .price-final {
  font-size: 1.3rem;
  line-height: 1.7;
  color: #333;
  text-align: left;
  margin-bottom: 20px;
}

.final-price-amount {
  font-size: 2.5rem;
  font-weight: 900;
  color: #e63946;
}

.final-offer-image {
  display: block;
  width: 100%;
  margin-top: 30px;
}

/* ==========================================
   ⏰ SEÇÃO: CONTADOR DE OFERTA
========================================== */
.countdown-section {
  background-color: #ffffff;
  padding: 40px 16px;
}

.countdown-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.notice-text {
  font-size: 1rem;
  color: #333;
  margin-bottom: 20px;
}

.notice-text strong {
  color: #6a0dad;
  text-decoration: underline;
}

.cta-link-text {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 30px;
}

.cta-link-text a {
  color: #007bff;
  font-weight: bold;
}

.countdown-title {
  font-size: 1.8rem;
  color: #e63946;
  font-weight: 700;
  margin-bottom: 20px;
}

.timer-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.timer-box {
  background-color: #ffd60a;
  border-radius: 10px;
  padding: 15px 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.timer-box span {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
}

.timer-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e63946;
}



/* ==========================================
   📊 SEÇÃO: BARRA DE ESCASSEZ
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira da barra */
.scarcity-bar-section {
  background-color: #ffffff;
  padding: 20px 16px;
}

/* ANOTAÇÃO: Container que centraliza e limita a largura */
.scarcity-bar-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ANOTAÇÃO: Estilo do texto acima da barra */
.scarcity-text {
  font-size: 0.9rem; /* ANOTAÇÃO: Tamanho do texto */
  color: #555; /* ANOTAÇÃO: Cor do texto */
  margin-bottom: 8px;
  text-align: left;
}

/* ANOTAÇÃO: Estilo da parte cinza (o fundo) da barra */
.progress-bar {
  width: 100%;
  background-color: #e9ecef; /* ANOTAÇÃO: Cor de fundo da barra */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* ANOTAÇÃO: Estilo da parte colorida (o preenchimento) da barra */
.progress-bar-fill {
  height: 30px; /* ANOTAÇÃO: Altura da barra */
  background-color: #d9534f; /* ANOTAÇÃO: Cor do preenchimento da barra */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alinha o texto da porcentagem à direita */
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
  
  /* ANOTAÇÃO: PONTO MAIS IMPORTANTE! Mude a porcentagem da barra aqui. */
  /* O valor de 86% deve corresponder ao texto que você colocou no HTML. */
  width: 86%;
}

/* ANOTAÇÃO: Estilo do texto da porcentagem (ex: 86%) */
.progress-bar-text {
  color: #ffffff; /* ANOTAÇÃO: Cor do texto da porcentagem */
  font-weight: 700;
  font-size: 1rem; /* ANOTAÇÃO: Tamanho do texto da porcentagem */
  padding-right: 10px; /* Espaço da borda direita */
}

/* ==========================================
   🔥 SEÇÃO: ACESSO E GARANTIA HOTMART
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.promo-access-section {
  background-color: #000; /* ANOTAÇÃO: Cor de fundo da seção */
  color: #e0e0e0; /* ANOTAÇÃO: Cor do texto (um branco suave) */
  padding: 60px 16px;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.promo-access-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ANOTAÇÃO: Estilo do Título (¿Como acceder...?) */
.promo-access-title {
  font-size: 1.8rem; /* ANOTAÇÃO: Tamanho do título */
  font-weight: 700;
  color: #ff9a00; /* ANOTAÇÃO: Cor laranja do título */
  margin-bottom: 20px;
}

/* ANOTAÇÃO: Estilo dos parágrafos de texto */
.promo-access-description,
.promo-access-guarantee {
  font-size: 1.1rem; /* ANOTAÇÃO: Tamanho do texto */
  line-height: 1.6;
  max-width: 650px; /* Limita a largura das linhas de texto */
  margin: 0 auto 30px;
}

/* ANOTAÇÃO: Estilo para as palavras em negrito/destaque */
.promo-access-section strong {
  color: #ff9a00; /* ANOTAÇÃO: Cor das palavras destacadas */
}

/* ANOTAÇÃO: Estilo do logo da Hotmart */
.hotmart-logo {
  display: block;
  margin: 40px auto; /* ANOTAÇÃO: Espaçamento acima e abaixo do logo */
  max-width: 250px; /* ANOTAÇÃO: Tamanho máximo do logo */
  width: 100%;
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO ACESSO
========================================== */
@media (min-width: 768px) {
  .promo-access-title {
    font-size: 2rem;
  }
  .promo-access-description,
  .promo-access-guarantee {
    font-size: 1.2rem;
  }
}


/* ==========================================
   ⭐ SEÇÃO: OPINIÕES E AVALIAÇÕES (COM IMAGENS)
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.reviews-section {
  background-color: #ffffff;
  padding: 50px 16px;
  border-top: 1px solid #eee;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.reviews-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ANOTAÇÃO: Estilo do Título (OPINIONES SOBRE EL LIBRO) */
.reviews-title {
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 20px;
}

/* ANOTAÇÃO: Container que agrupa a nota e as estrelas */
.rating-summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* ANOTAÇÃO: Estilo da nota numérica (5.0) */
.rating-number {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
}

/* ANOTAÇÃO: Estilo das estrelas */
.rating-stars {
  font-size: 2rem;
  color: #ffc107;
}

/* --- NOVOS ESTILOS PARA AS IMAGENS --- */

/* ANOTAÇÃO: Container que organiza as imagens de opinião */
.reviews-gallery {
  margin-top: 40px; /* Espaço entre as estrelas e a primeira imagem */
  display: flex;
  flex-direction: column; /* Coloca as imagens uma embaixo da outra */
  align-items: center; /* Centraliza as imagens horizontalmente */
  gap: 30px; /* ANOTAÇÃO: Espaço ENTRE cada imagem */
}

/* ANOTAÇÃO: Estilo de cada imagem de opinião */
.review-image {
  width: 100%;
  max-width: 550px; /* ANOTAÇÃO: Tamanho máximo das imagens. Pode ajustar. */
  border-radius: 8px;
  
  /* ANOTAÇÃO: Aqui está o EFEITO DE SOMBRA que você pediu. */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
/* --- FIM DOS NOVOS ESTILOS --- */


/* ==========================================
    RESPONSIVIDADE DA SEÇÃO OPINIÕES
========================================== */
@media (min-width: 768px) {
  .reviews-title {
    font-size: 2rem;
  }
}


/* ==========================================
   🎯 SEÇÃO: PÚBLICO-ALVO
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.target-audience-section {
  background-color: #000; /* ANOTAÇÃO: Cor de fundo da seção */
  color: #fff; /* ANOTAÇÃO: Cor padrão do texto */
  padding: 60px 16px;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.target-audience-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center; /* Centraliza o título e o bloco da lista */
}

/* ANOTAÇÃO: Estilo do Título */
.target-audience-title {
  font-size: 1.8rem; /* ANOTAÇÃO: Tamanho do título */
  font-weight: 700;
  color: #ff9a00; /* ANOTAÇÃO: Cor laranja do título */
  margin-bottom: 40px;
}

/* ANOTAÇÃO: Estilo da lista */
.audience-list {
  list-style: none; /* Remove os marcadores padrão */
  padding: 0;
  display: inline-block; /* Truque para o bloco da lista centralizar */
  text-align: left; /* Mantém o texto DENTRO da lista alinhado à esquerda */
}

/* ANOTAÇÃO: Estilo de cada item da lista */
.audience-list li {
  font-size: 1.1rem; /* ANOTAÇÃO: Tamanho do texto dos itens */
  line-height: 1.7;
  margin-bottom: 20px;
  padding-left: 35px; /* Espaço para o ícone */
  position: relative;
}

/* ANOTAÇÃO: Adiciona o ícone de mão (👉) antes de cada item */
.audience-list li::before {
  content: '👉';
  position: absolute;
  left: 0;
  top: 0;
}

/* ANOTAÇÃO: Estilo para as palavras em destaque/negrito */
.audience-list strong {
  color: #ff9a00; /* ANOTAÇÃO: Cor das palavras destacadas */
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO PÚBLICO-ALVO
========================================== */
@media (min-width: 768px) {
  .target-audience-title {
    font-size: 2rem;
  }
  .audience-list li {
    font-size: 1.2rem;
  }
}


/* ==========================================
   👩‍🔬 SEÇÃO: BIOGRAFIA DA AUTORA
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.author-bio-section {
  background-color: #ffffff; /* ANOTAÇÃO: Cor de fundo da seção */
  color: #333; /* ANOTAÇÃO: Cor padrão do texto */
  padding: 60px 16px;
  border-top: 1px solid #eee;
}

/* ANOTAÇÃO: Container que centraliza e limita a largura */
.author-bio-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ANOTAÇÃO: Estilo do nome da autora */
.author-name {
  font-size: 2rem; /* ANOTAÇÃO: Tamanho do nome */
  font-weight: 700;
  color: #000; /* ANOTAÇÃO: Cor do nome */
  margin-bottom: 5px;
}

/* ANOTAÇÃO: Estilo do cargo/título (Experta) */
.author-title {
  font-size: 1.1rem; /* ANOTAÇÃO: Tamanho do cargo */
  color: #888; /* ANOTAÇÃO: Cor do cargo */
  margin-bottom: 25px;
  font-weight: 600;
}

/* ANOTAÇÃO: Estilo dos parágrafos da biografia */
.author-description {
  font-size: 1.1rem; /* ANOTAÇÃO: Tamanho do texto */
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ANOTAÇÃO: Estilo para o texto em negrito (não muda de cor neste caso) */
.author-description strong {
  color: #000;
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO BIOGRAFIA
========================================== */
@media (min-width: 768px) {
  .author-name {
    font-size: 2.3rem;
  }
  .author-description {
    font-size: 1.2rem;
  }
}

/* ==========================================
   📖 SEÇÃO: O QUE CONTÉM O LIVRO
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.book-content-section {
  background-color: #ffffff; /* ANOTAÇÃO: Cor de fundo da seção */
  padding: 60px 16px;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.book-content-container {
  max-width: 900px; /* ANOTAÇÃO: Largura máxima do conteúdo. Pode ajustar. */
  margin: 0 auto;
  text-align: center;
}

/* ANOTAÇÃO: Estilo do Título */
.book-content-title {
  font-size: 1.8rem; /* ANOTAÇÃO: Tamanho do título */
  font-weight: 700;
  color: #6a0dad; /* ANOTAÇÃO: Cor roxa do título */
  text-transform: uppercase;
  margin-bottom: 30px;
}

/* ANOTAÇÃO: Estilo da imagem do livro */
.book-content-image {
  width: 100%; /* Faz a imagem ser responsiva */
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Sombra suave */
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO CONTEÚDO
========================================== */
@media (min-width: 768px) {
  .book-content-title {
    font-size: 2rem;
  }
}


/* ==========================================
   ❓ SEÇÃO: PERGUNTAS FREQUENTES (FAQ)
========================================== */

.faq-section {
  background-color: #ffffff;
  padding: 60px 16px;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: #333;
  margin-bottom: 40px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}

/* ANOTAÇÃO: Estilo da barra da pergunta (botão clicável) */
.accordion-header {
  width: 100%;
  background-color: #c87941; /* ANOTAÇÃO: Cor de fundo da pergunta */
  color: #fff; /* ANOTAÇÃO: Cor do texto da pergunta */
  padding: 15px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: #b36b35; /* Cor ao passar o mouse */
}

/* ANOTAÇÃO: Estilo do ícone (+/-) */
.accordion-icon {
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s ease;
}

/* ANOTAÇÃO: Estilo da caixa de resposta (inicialmente escondida) */
.accordion-content {
  background-color: #f9f9f9;
  color: #333;
  max-height: 0; /* Começa fechado */
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  border-radius: 0 0 8px 8px;
}

.accordion-content p {
  padding: 20px;
  line-height: 1.6;
}

/* ANOTAÇÃO: Estilos para quando o item está ATIVO (aberto) */
.accordion-item.active .accordion-header {
  border-radius: 8px 8px 0 0;
}
.accordion-item.active .accordion-icon {
  transform: rotate(45deg); /* Gira o "+" para parecer um "x" */
}


/* ==========================================
   🔑 SEÇÃO: COMO ACESSAR
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.access-info-section {
  background-color: #000; /* ANOTAÇÃO: Cor de fundo da seção */
  color: #fff; /* ANOTAÇÃO: Cor padrão do texto */
  padding: 60px 16px;
}

/* ANOTAÇÃO: Container que centraliza e limita a largura do conteúdo */
.access-info-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ANOTAÇÃO: Estilo do Título */
.access-info-title {
  font-size: 1.8rem; /* ANOTAÇÃO: Tamanho do título */
  font-weight: 700;
  color: #FFFF00; /* ANOTAÇÃO: Cor amarela do título */
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* ANOTAÇÃO: Estilo do parágrafo de descrição */
.access-info-description {
  font-size: 1.2rem; /* ANOTAÇÃO: Tamanho do texto */
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* ANOTAÇÃO: Estilo para as palavras em destaque */
.access-info-description strong {
  color: #FFFF00; /* ANOTAÇÃO: Cor amarela das palavras destacadas */
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO ACESSO
========================================== */
@media (min-width: 768px) {
  .access-info-title {
    font-size: 2rem;
  }
  .access-info-description {
    font-size: 1.3rem;
  }
}


/* ==========================================
   📦 SEÇÃO: O QUE VOCÊ VAI RECEBER (Simplificado)
========================================== */

/* Estilo da seção que define o fundo geral */
.what-you-get-section {
  background-color: #000; /* Fundo preto da seção */
  padding: 40px 16px; /* Espaçamento da seção */
}

/* Wrapper para a borda/brilho */
.what-you-get-wrapper {
  max-width: 900px; /* Largura máxima da caixa com brilho */
  margin: 0 auto;
  border: 2px solid #ddd; /* Borda simples */
  border-radius: 15px;
  box-shadow: 0 0 25px rgba(255, 255, 0, 0.7); /* Efeito de brilho amarelo */
  padding: 2px;
  background-color: #000;
}

/* Container interno para o conteúdo (título e imagem) */
.what-you-get-container {
  text-align: center;
  padding: 30px 20px;
  border-radius: 13px;
  background-color: #000;
}

/* Estilo do Título */
.what-you-get-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFFF00;
  text-transform: uppercase;
  margin-bottom: 30px;
}

/* Estilo da imagem com todos os bônus */
.wys-bonuses-image {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Faz a imagem ocupar o espaço disponível */
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO
========================================== */
@media (min-width: 768px) {
  .what-you-get-title {
    font-size: 2.2rem;
  }
}


/* ==========================================
   💲 ESTILOS DO RESUMO DE PREÇOS
========================================== */

/* ANOTAÇÃO: Container do resumo de preços */
.price-summary {
  margin-top: 40px; /* Espaço depois da imagem dos bônus */
}

/* ANOTAÇÃO: Lista de itens e valores */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 30px;
  max-width: 500px;
  text-align: left;
}

.price-list li {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 10px;
}

.price-list .item-price {
  color: #FFFF00; /* ANOTAÇÃO: Cor amarela dos preços na lista */
  font-weight: bold;
}

/* ANOTAÇÃO: Bloco da soma total */
.total-sum {
  margin-bottom: 30px;
  font-size: 1.5rem;
  color: #fff;
  font-weight: bold;
}

.total-sum .total-price {
  display: block;
  font-size: 2.5rem; /* ANOTAÇÃO: Tamanho do preço total */
  font-weight: 900;
  color: #e63946; /* ANOTAÇÃO: Cor vermelha do preço total */
  text-decoration: line-through;
}

/* ANOTAÇÃO: Bloco do valor especial */
.special-price {
  margin-bottom: 30px;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.special-price .final-price-large {
  display: block;
  font-size: 5rem; /* ANOTAÇÃO: Tamanho do preço final */
  font-weight: 900;
  color: #FFFF00; /* ANOTAÇÃO: Cor amarela do preço final */
  line-height: 1.1;
}

/* ANOTAÇÃO: Textos finais de aviso e link */
.final-notice, .final-cta-link {
  font-size: 1rem;
  color: #ccc;
  line-height: 1.5;
}

.final-notice strong {
  color: #9370DB; /* ANOTAÇÃO: Cor roxa da palavra "Importante" */
  text-decoration: underline;
}


/* ==========================================
   🟡 BOTÃO DE IMAGEM FINAL
========================================== */

/* ANOTAÇÃO: Container do botão para dar espaçamento */
.image-button-container {
  margin-top: 40px; /* ANOTAÇÃO: Espaço acima do botão */
  text-align: center;
}

/* ANOTAÇÃO: Estilo da imagem do botão */
.image-button {
  max-width: 400px; /* ANOTAÇÃO: Tamanho máximo do botão. Pode ajustar. */
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease;

  /* ANOTAÇÃO: A linha abaixo ativa a animação de pulsar. */
  animation: pulse-image-button 2s infinite;
}

/* ANOTAÇÃO: Efeito de aumentar um pouco ao passar o mouse */
.image-button:hover {
  transform: scale(1.05);
}

/* ANOTAÇÃO: Animação de pulsar específica para este botão */
@keyframes pulse-image-button {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* ANOTAÇÃO: Ajuste a intensidade do pulso aqui */
  }
  100% {
    transform: scale(1);
  }
}


/* ==========================================
   🛡️ SELO DE COMPRA SEGURA
========================================== */

/* ANOTAÇÃO: Container do selo para dar espaçamento */
.trust-badge-container {
  margin-top: 40px; /* ANOTAÇÃO: Espaço acima do selo */
  text-align: center;
}

/* ANOTAÇÃO: Estilo da imagem com os logos de pagamento */
.payment-logos-image {
  max-width: 450px; /* ANOTAÇÃO: Tamanho máximo da imagem. Pode ajustar. */
  width: 100%;
}

/* ANOTAÇÃO: Estilo do texto "Disponible para todo el mundo" */
.availability-text {
  color: #aaa; /* ANOTAÇÃO: Cor cinza do texto */
  font-size: 1.3rem; /* ANOTAÇÃO: Tamanho do texto */
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 15px; /* ANOTAÇÃO: Espaço entre a imagem e o texto */
}

@media (max-width: 480px) {
  .availability-text {
    font-size: 1rem; /* Tamanho do texto menor em telas pequenas */
  }
}


/* ==========================================
   🏆 SEÇÃO: SELOS DE GARANTIA (IMAGEM ÚNICA)
========================================== */

/* ANOTAÇÃO: Container que segura a imagem dos selos */
.trust-seals-container {
  margin-top: 40px; /* ANOTAÇÃO: Espaço acima da imagem. Pode ajustar. */
  text-align: center; /* Garante o alinhamento central da imagem */
}

/* ANOTAÇÃO: Estilo para a imagem ÚNICA dos selos */
.trust-seals-banner {
  max-width: 450px; /* ANOTAÇÃO: Tamanho máximo da imagem. Pode ajustar. */
  width: 100%;
  height: auto;
}

/* ==========================================
   ⏰ ESTILOS DO CONTADOR INTERNO
========================================== */

/* ANOTAÇÃO: Container para dar espaçamento */
.inner-countdown {
  margin-top: 40px;
}

/* ANOTAÇÃO: Estilo do título do contador interno (amarelo) */
.countdown-title-inner {
  font-size: 1.8rem;
  color: #FFFF00; /* ANOTAÇÃO: Cor do título */
  font-weight: 700;
  margin-bottom: 20px;
}

/* ANOTAÇÃO: Estilo dos NÚMEROS dentro das caixas (vermelhos) */
.inner-countdown .timer-box span {
  color: #e63946; /* ANOTAÇÃO: Cor dos números */
}

/* ANOTAÇÃO: Estilo dos TEXTOS (Hour(s), etc) abaixo dos números (amarelos) */
.timer-label-inner {
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFF00; /* ANOTAÇÃO: Cor dos rótulos */
}


/* ==========================================
   ❓ SEÇÃO: PERGUNTAS FREQUENTES (ESTILO 2) - COM ÍCONE
========================================== */

.faq-section-alt {
  background-color: #ffffff;
  padding: 60px 16px;
}

.faq-container-alt {
  max-width: 900px;
  margin: 0 auto;
}

.faq-title-alt {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 40px;
}

.accordion-item-alt {
  margin-bottom: 10px;
}

.accordion-header-alt {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 18px 25px;
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-icon-alt {
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s ease;
  margin-left: 15px;
}

.accordion-content-alt {
  background-color: #fff;
  color: #333;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.accordion-content-alt p {
  padding: 25px;
  line-height: 1.7;
  font-size: 1.1rem;
}

.accordion-item-alt.active .accordion-header-alt {
  border-radius: 8px 8px 0 0;
}
.accordion-item-alt.active .accordion-icon-alt {
  transform: rotate(45deg);
}

/* ==========================================
   🟡 BOTÃO DE CTA FINAL (IMAGEM)
========================================== */

/* ANOTAÇÃO: Estilo da seção que segura o botão, para dar espaçamento */
.cta-image-section {
  background-color: #ffffff; /* ANOTAÇÃO: Cor de fundo da seção */
  padding: 20px 16px 60px; /* ANOTAÇÃO: Espaçamento acima e abaixo do botão */
}

/* ==========================================
   🛡️ SEÇÃO: SELO FINAL DE SEGURANÇA
========================================== */

/* ANOTAÇÃO: Estilo da seção que segura o selo final */
.final-trust-section {
  background-color: #ffffff; /* ANOTAÇÃO: Cor de fundo da seção */
  padding: 40px 16px;
}


/* ==========================================
   🦶 SEÇÃO: RODAPÉ FINAL
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira do rodapé */
.site-footer {
  background-color: #2c2f3b; /* ANOTAÇÃO: Cor de fundo cinza-azulado escuro */
  color: #8a8d9b; /* ANOTAÇÃO: Cor do texto mais claro/apagado */
  padding: 30px 16px;
  text-align: center;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.footer-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ANOTAÇÃO: Estilo do texto de copyright */
.footer-copyright {
  font-size: 1rem; /* ANOTAÇÃO: Tamanho do texto de copyright */
  font-weight: 600;
  color: #fff; /* ANOTAÇÃO: Cor branca para o texto principal */
  margin-bottom: 15px;
}

/* ANOTAÇÃO: Estilo do texto de aviso legal (disclaimer) */
.footer-disclaimer {
  font-size: 0.75rem; /* ANOTAÇÃO: Tamanho do texto de aviso */
  line-height: 1.5;
  max-width: 600px; /* Limita a largura do texto */
  margin: 0 auto; /* Centraliza o bloco de texto */
}

/* ==========================================
   ❓ SEÇÃO: DORES E DESEJOS
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.pain-points-section {
  background-color: #f0f0f0; /* ANOTAÇÃO: Cor de fundo cinza claro */
  padding: 50px 16px;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.pain-points-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ANOTAÇÃO: Estilo de cada parágrafo/frase */
.pain-points-container p {
  font-size: 1.3rem; /* ANOTAÇÃO: Tamanho do texto */
  color: #333; /* ANOTAÇÃO: Cor do texto */
  line-height: 1.6;
  margin-bottom: 20px; /* Espaçamento entre as frases */
}

/* ANOTAÇÃO: Estilo do texto em negrito */
.pain-points-container p strong {
  color: #000; /* Cor do texto destacado */
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO
========================================== */
@media (max-width: 768px) {
  .pain-points-container p {
    font-size: 1.1rem; /* Tamanho do texto menor em telas pequenas */
  }
}


/* ==========================================
   📢 SEÇÃO: CHAMADA PARA AÇÃO (Oportunidade)
========================================== */

/* ANOTAÇÃO: Estilo da seção inteira */
.opportunity-section {
  background-color: #000; /* ANOTAÇÃO: Cor de fundo da seção */
  padding: 60px 16px;
}

/* ANOTAÇÃO: Container que centraliza o conteúdo */
.opportunity-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ANOTAÇÃO: Estilo do subtítulo amarelo */
.opportunity-subheading {
  font-size: 1.1rem; /* ANOTAÇÃO: Tamanho do subtítulo */
  font-weight: 700;
  color: #ff9a00; /* ANOTAÇÃO: Cor do subtítulo */
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ANOTAÇÃO: Estilo do título principal */
.opportunity-heading {
  font-size: 2.5rem; /* ANOTAÇÃO: Tamanho do título */
  font-weight: 900;
  color: #fff; /* ANOTAÇÃO: Cor do título */
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 40px;
}

/* ANOTAÇÃO: Estilo para as palavras destacadas em laranja */
.opportunity-heading .highlight {
  color: #ff9a00;
}

/* ANOTAÇÃO: Estilo da imagem do livro */
.opportunity-book-image {
  display: block;
  margin: 0 auto;
  max-width: 300px; /* ANOTAÇÃO: Tamanho máximo da imagem */
  width: 100%;
}

/* ==========================================
    RESPONSIVIDADE DA SEÇÃO
========================================== */
@media (max-width: 768px) {
  .opportunity-heading {
    font-size: 1.8rem; /* Tamanho do título menor em telas pequenas */
  }
}


/* ==========================================
   🟡 BOTÃO DE IMAGEM APRIMORADO (VERSÃO MAIS RÁPIDA)
========================================== */

/* ANOTAÇÃO: Estilo da imagem do botão com novos efeitos */
.cta-image-button-enhanced {
  max-width: 400px;
  width: 100%;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* ANOTAÇÃO: Mudei a velocidade de 1.5s para 1s (bem mais rápido) */
  animation: pulse-image-button-fast 1s infinite;
}

/* ANOTAÇÃO: EFEITO HOVER MAIOR (aumenta para 110%) */
.cta-image-button-enhanced:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ANOTAÇÃO: EFEITO 3D ao clicar (simula o botão sendo pressionado) */
.cta-image-button-enhanced:active {
  transform: scale(1.08) translateY(2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* ANOTAÇÃO: Animação de pulsar mais rápida e mais forte */
@keyframes pulse-image-button-fast {
  0% {
    transform: scale(1);
  }
  50% {
    /* ANOTAÇÃO: Aumentei a intensidade do pulso de 1.04 para 1.08 */
    transform: scale(1.08); 
  }
  100% {
    transform: scale(1);
  }
}