*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
#oferta { scroll-margin-top: 100px; }
body { font-family: 'Inter', sans-serif; background-color: #050b17; color: white; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.floating-cta { position: fixed; z-index: 1000; right: 24px; bottom: 24px; }
.floating-cta[hidden] { display: none; }
.floating-cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 24px; border-radius: 999px;
  background: #0077ff; color: #fff; font-size: 14px; font-weight: 800;
  text-decoration: none; box-shadow: 0 10px 28px rgba(0, 82, 190, .32);
}
.floating-cta-button:hover { background: #0066e0; }
.floating-cta-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  .floating-cta { left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(5, 11, 23, .94); box-shadow: 0 -5px 24px rgba(0, 0, 0, .2); }
  .floating-cta-button { width: 100%; min-height: 50px; }
  body:has(.floating-cta:not([hidden])) #notif-popup { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}
.cta-pulse { animation: cta-pulse 2.4s ease-in-out infinite; transform-origin: center; }
.cta-pulse:hover, .cta-pulse:focus-visible { animation-play-state: paused; scale: 1.035; }
@keyframes cta-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-pulse { animation: none; }
  .cta-pulse:hover, .cta-pulse:focus-visible { scale: 1; }
}
    
    .text-gradient-primary { color: #0070f3; }
    .text-gradient-gold { background: linear-gradient(90deg, #c8a700, #f5c518 60%, #c8a700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .bg-radial-hero { background: #050b17; }
    .tb-grid-bg { background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 92px 92px; }
    .animate-notif-slide-in { animation: notifSlideIn 0.5s ease-out forwards; }
    .animate-notif-slide-out { animation: notifSlideOut 0.5s ease-in forwards; }
    @keyframes notifSlideIn { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes notifSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-110%); opacity: 0; } }


/* Evita que o navegador tente compensar mudanças de layout durante o CTA. */
html.cta-scrolling,
html.cta-scrolling body { overflow-anchor: none; }

/* Reserva espaço para imagens lazy-load que ficam antes da oferta.
   Assim a posição da seção #oferta não muda enquanto o usuário desce. */
#testimonials { padding-top: 64px !important; padding-bottom: 64px !important; }
#testimonials h2 { margin-bottom: 26px !important; }
#testimonials #test-dots { margin-top: 18px !important; }
#test-slider, #test-slider > div { min-height: 406px; }
#test-slider img { max-height: 390px !important; }

/* Faixa contínua das páginas de amostra. Os dois conjuntos iguais fecham o loop sem salto. */
.samples-viewport { width: 100%; }
#samples-slider.samples-track {
  display: flex;
  width: max-content;
  animation: samples-flow 42s linear infinite;
}
.samples-set {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  padding-right: 18px;
}
.sample-page {
  display: block;
  width: auto;
  max-width: none;
  height: 500px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
}
#bonuses-container {
  max-width: 780px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #d7e6fa;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 63, 140, .1);
  text-align: left;
}
.bonus-collage { display: block; width: 100%; height: auto; }
.bonus-list { list-style: none; margin: 0; padding: 22px 34px 28px; background: #0b1628; }
.bonus-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid #e5edf7;
  color: #f5c518;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
}
.bonus-list li:last-child { border-bottom: 0; }
.bonus-gift { flex: none; font-size: 22px; line-height: 1; }
#ideal-para h2 {
  font-size: clamp(12px, 3.5vw, 44px) !important;
  white-space: nowrap;
}
@keyframes samples-flow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #samples-slider.samples-track { animation: none; }
}

/* =========================================================
   RESPONSIVIDADE / MOBILE
   Mantém o desktop intacto e deixa a página mais compacta
   em celulares, reduzindo altura e mudanças de layout.
   ========================================================= */
img { max-width: 100%; height: auto; }
#promo-banner { position: absolute; }

/* Título e arte visíveis na primeira tela, mantendo o hero centralizado. */
@media (min-width: 768px) {
  #hero { padding-top: clamp(68px, 8svh, 88px) !important; }
  #hero > div:nth-of-type(1) { padding-bottom: 0 !important; }
  #hero h1 {
    font-size: clamp(28px, min(2.9vw, 5svh), 38px) !important;
    line-height: 1.04 !important;
  }
  #hero > div:nth-of-type(2) {
    width: min(100%, 66svh, 700px);
    margin-top: clamp(8px, 1.4svh, 16px) !important;
  }
  #hero > div:nth-of-type(3) {
    padding-top: 12px !important;
    padding-bottom: 48px !important;
  }
  #hero p {
    font-size: clamp(15px, 1.4vw, 17px) !important;
    line-height: 1.45 !important;
  }
  #hero .mt-9 { margin-top: 14px; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 0; }
  #oferta { scroll-margin-top: 24px; }

  #hero {
    min-height: auto !important;
    padding-top: clamp(56px, 7svh, 68px) !important;
  }
  #hero > div:nth-of-type(1) {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 0 !important;
  }
  #hero > div:nth-of-type(2) {
    width: min(85vw, 320px);
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 8px !important;
  }
  #hero > div:nth-of-type(3) {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 12px !important;
    padding-bottom: 48px !important;
  }
  #hero h1 {
    font-size: clamp(21px, 5.7vw, 26px) !important;
    line-height: 1.06 !important;
  }
  #hero h1 br { display: none; }
  #hero p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  #hero .btn-oferta {
    min-height: 46px;
    height: 46px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    font-size: 13px !important;
  }

  /* Espaçamento vertical das seções */
  #recursos,
  #trusted-by,
  #recursos-detalhe,
  #testimonials,
  #oferta,
  #garantia {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  #faq {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  #testimonials { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* Títulos */
  #recursos h2,
  #trusted-by h2,
  #recursos-detalhe h2,
  #testimonials h2,
  #oferta .oferta-titulo,
  #faq h2,
  #garantia h2 {
    font-size: clamp(26px, 7.5vw, 32px) !important;
    line-height: 1.1 !important;
  }
  #recursos h2,
  #recursos-detalhe h2,
  #testimonials h2 { margin-bottom: 22px !important; }

  /* Cards de benefícios */
  #recursos article {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }
  #recursos article > div:first-child {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 16px !important;
  }
  #recursos article h3 { font-size: 18px !important; margin-bottom: 8px !important; }
  #recursos article p { font-size: 14px !important; line-height: 1.55 !important; }

  /* Amostras e depoimentos: ocupam menos altura */
  #testimonials .overflow-hidden {
    margin-left: 38px !important;
    margin-right: 38px !important;
  }
  #test-slider,
  #test-slider > div {
    min-height: 356px !important;
  }
  #test-slider img {
    max-height: 340px !important;
    width: auto !important;
    object-fit: contain;
  }
  #trusted-by .mt-14 { margin-top: 32px !important; }
  #trusted-by .mt-10 { margin-top: 26px !important; }
  .sample-page { height: 340px; }

  .bonus-list { padding: 14px 20px 20px; }
  .bonus-list li { gap: 12px; padding: 13px 0; font-size: 15px; }

  /* Oferta */
  #oferta > div > .text-center { margin-bottom: 28px !important; }
  #oferta .pricing-packages-grid { gap: 24px !important; }
  #oferta .pricing-packages-grid > div {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
  #oferta #pacote-basico { margin-top: 0 !important; }
  #oferta .text-\[48px\] { font-size: 42px !important; }
  #oferta .text-\[3\.5rem\] { font-size: 46px !important; }
  #oferta .pricing-packages-grid img[alt="Pacote Completo"] { max-width: 260px !important; }
  #oferta .min-h-\[60px\] {
    min-height: 52px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 15px !important;
  }

  /* Popup do pacote básico: preserva o layout compacto original */
  #discount-popup {
    padding: 14px !important;
  }
  #discount-popup > div {
    width: 100% !important;
    max-width: 440px !important;
    max-height: 95vh !important;
    padding: 24px 16px 20px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }
  #discount-popup h2 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }
  #discount-popup #popup-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #discount-popup #popup-list > div {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 0 !important;
  }
  #discount-popup img[alt="Pack Completo"] {
    width: 90px !important;
    max-width: 90px !important;
  }

  /* FAQ */
  #faq .grid { gap: 26px !important; }
  #faq button { padding: 17px 16px !important; }

  /* Garantia */
  #garantia { gap: 0; }
  #garantia img { width: 130px !important; }
  #garantia > div { gap: 18px !important; }
  #garantia p { font-size: 14px !important; line-height: 1.6 !important; }
  #garantia .btn-oferta {
    padding: 15px 24px !important;
    font-size: 13px !important;
  }

  /* Rodapé mais compacto */
  footer { padding-top: 28px !important; padding-bottom: 28px !important; }
  footer > div > div { padding: 24px 10px 20px !important; }
  footer p { font-size: 13px !important; line-height: 1.6 !important; }

  /* Notificação não pode ultrapassar a largura da tela */
  #notif-popup {
    width: min(230px, calc(100vw - 20px)) !important;
    left: 10px !important;
  }
}

@media (max-width: 380px) {
  #promo-banner { font-size: 12px !important; padding: 8px 10px !important; }
  #hero { padding-top: 56px !important; }
  #hero h1 { font-size: 22px !important; }
  #hero p { font-size: 14px !important; }
  #test-slider, #test-slider > div { min-height: 316px !important; }
  #test-slider img { max-height: 300px !important; }
  .sample-page { height: 300px; }
}