*, *::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; }
    
    .text-gradient-blue { background: linear-gradient(90deg, #fff 0%, #fef08a 45%, #eab308 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .text-gradient-primary { background: linear-gradient(90deg, #eab308 0%, #fef08a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .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: radial-gradient(at center top, rgb(10, 22, 40) 0%, rgb(5, 11, 23) 60%, rgb(2, 6, 14) 100%); }
    .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. */
#samples-slider,
#test-slider { min-height: 536px; }
#samples-slider > div,
#test-slider > div { min-height: 536px; }

/* =========================================================
   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; }

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

  /* HERO: sem altura mínima de uma tela inteira no celular */
  #hero {
    min-height: auto !important;
    padding-top: 76px !important;
  }
  #hero > div:nth-of-type(1) {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 10px !important;
  }
  #hero > div:nth-of-type(2) {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 18px !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(23px, 7vw, 30px) !important;
    line-height: 1.08 !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;
  }

  /* 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: 32px !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 */
  #trusted-by .overflow-hidden,
  #testimonials .overflow-hidden {
    margin-left: 38px !important;
    margin-right: 38px !important;
  }
  #samples-slider,
  #test-slider,
  #samples-slider > div,
  #test-slider > div {
    min-height: 376px !important;
  }
  #samples-slider img,
  #test-slider img {
    max-height: 360px !important;
    width: auto !important;
    object-fit: contain;
  }
  #trusted-by .mt-14 { margin-top: 32px !important; }
  #trusted-by .mt-10 { margin-top: 26px !important; }

  /* Bônus: as capas 2:3 deixam de ocupar quase a tela inteira */
  #bonuses-container {
    gap: 20px !important;
  }
  #bonuses-container > div {
    /* Card mais compacto para acompanhar a proporção da capa 2:3. */
    padding: 16px 14px 18px !important;
    border-radius: 20px !important;
    max-width: 320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #bonuses-container > div > div:first-child {
    /* A capa passa a ocupar quase toda a largura útil do card. */
    width: min(78vw, 255px) !important;
    max-width: 100% !important;
    aspect-ratio: 2 / 3;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 14px !important;
    background: transparent;
  }
  #bonuses-container > div > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  #bonuses-container .text-primary.font-bold { font-size: 18px !important; margin-bottom: 6px !important; }
  #bonuses-container h3 { font-size: 18px !important; line-height: 1.25 !important; margin-bottom: 10px !important; }
  #bonuses-container p { font-size: 13.5px !important; line-height: 1.48 !important; margin-bottom: 14px !important; }
  #bonuses-container .mt-auto { margin-top: 4px !important; }

  /* 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: 68px !important; }
  #hero h1 { font-size: 22px !important; }
  #hero p { font-size: 14px !important; }
  #bonuses-container > div { max-width: 290px; }
  #bonuses-container > div > div:first-child { width: min(76vw, 230px) !important; }
  #samples-slider, #test-slider,
  #samples-slider > div, #test-slider > div { min-height: 336px !important; }
  #samples-slider img, #test-slider img { max-height: 320px !important; }
}