/* ============================================================================
   RESPONSIVE.CSS — Breakpoints
   ----------------------------------------------------------------------------
   Testado em: 320, 375, 390, 430, 768, 1024, 1280 e 1440px.
   Regra: nenhum scroll horizontal em nenhuma largura.
============================================================================ */

/* ============================================================ ≤ 1200px */
@media (max-width: 1200px) {
  :root { --section-spacing: 60px; }

  .hero__grid { gap: 16px; }
  .hero__note { font-size: 1.15rem; max-width: 160px; }
  .hero__note-arrow { width: 78px; height: 48px; }
  .comparison__img { max-height: 300px; }
}

/* ============================================================ ≤ 1024px */
@media (max-width: 1024px) {
  .hero__inner { padding-bottom: 40px; }
  .hero__grid { min-height: 0; }
  .hero__product { max-height: 460px; }
  .hero__media { min-height: 340px; }

  .problem__inner { gap: 36px; }
  .problem__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  .band--choose { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comparison__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; }
  .comparison__img { max-height: 250px; }
  .compare__vs { width: 52px; height: 52px; font-size: 0.92rem; }

  .offer__inner { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); }
  .trust-row { gap: 20px; }
}

/* ============================================================== ≤ 900px */
@media (max-width: 900px) {
  /* Hero passa a ser uma coluna: texto em cima, produto embaixo. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__content { max-width: none; }
  .hero__media { min-height: 0; justify-content: center; }
  .hero__product { max-height: 400px; }
  .hero__bg-img { object-position: center; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      var(--veil-95) 0%,
      var(--veil-88) 55%,
      var(--veil-80) 100%);
  }
  .hero__note {
    position: static;
    margin: 12px auto 0;
    transform: none;
    max-width: none;
  }
  .hero__note-arrow { display: none; }

  .problem__inner { grid-template-columns: minmax(0, 1fr); }
  .problem__media { order: -1; max-width: 520px; }

  .band--choose { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .comparison__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

  .testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .offer__inner { grid-template-columns: minmax(0, 1fr); }
  .offer__bg::after {
    background: linear-gradient(180deg,
      var(--veil-80) 0%,
      var(--veil-95) 60%,
      var(--color-dark) 100%);
  }
  .offer-card { max-width: 460px; }
}

/* ============================================================== ≤ 768px */
@media (max-width: 768px) {
  :root { --section-spacing: 48px; }

  body { font-size: 15px; }

  .container,
  .hero__inner { padding-left: 20px; padding-right: 20px; }
  .band--choose { padding-left: 20px; padding-right: 20px; }

  .brand { padding-bottom: 20px; }

  .hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }

  .comparison__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .comparison__img { max-height: 280px; }

  .testimonials__grid { grid-template-columns: minmax(0, 1fr); }

  .consent-banner__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1 1 auto; }

  /* Espaço para a barra fixa de CTA não cobrir o rodapé */
  .sticky-cta--mobile { display: block; }
  body.has-sticky-cta .site-footer { padding-bottom: 76px; }
}

/* ============================================================== ≤ 600px */
@media (max-width: 600px) {
  .hero__title { font-size: clamp(1.7rem, 1.1rem + 3.4vw, 2.2rem); }
  .hero__cta { margin-top: 28px; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { padding: 16px 22px; font-size: 0.98rem; }

  .problem__benefits { margin-top: 28px; }

  .icon-circle { width: 46px; height: 46px; flex-basis: 46px; }
  .icon-circle--check { width: 38px; height: 38px; flex-basis: 38px; }

  .compare__label { font-size: 0.64rem; padding: 9px 4px; }
  .compare__caption { font-size: 0.74rem; padding: 11px 4px; }
  .compare__vs { width: 46px; height: 46px; font-size: 0.85rem; }

  .offer-card { padding: 18px; }
  .countdown__value { font-size: 1.8rem; }
  .countdown__unit { min-width: 48px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }

  .consent-modal__dialog { padding: 20px; }
  .consent-modal__actions .btn { flex: 1 1 100%; }
}

/* ============================================================== ≤ 430px */
@media (max-width: 430px) {
  .container,
  .hero__inner,
  .band--choose { padding-left: 16px; padding-right: 16px; }

  .brand__slogan { display: none; }

  .hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .hero__product { max-height: 320px; }
  .problem__benefits { grid-template-columns: minmax(0, 1fr); }

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

/* ============================================================== ≤ 360px */
@media (max-width: 360px) {
  body { font-size: 14.5px; }

  .btn { padding: 13px 18px; gap: 8px; }
  .btn--lg { padding: 15px 18px; font-size: 0.92rem; }

  .countdown { gap: 2px; }
  .countdown__unit { min-width: 42px; }
  .countdown__value { font-size: 1.55rem; }
  .countdown__sep { font-size: 1.3rem; }

  .compare { gap: 6px; }
  .compare__vs { width: 40px; height: 40px; font-size: 0.78rem; }
}

/* ============================================================ ≥ 1440px */
@media (min-width: 1440px) {
  .hero__inner { padding-top: 32px; padding-bottom: 60px; }
  .hero__grid { min-height: 520px; }
  .hero__product { max-height: 620px; }
}

/* =============================================================== print */
@media print {
  .consent-banner,
  .consent-modal,
  .sticky-cta,
  .hero__bg,
  .offer__bg { display: none !important; }

  body { color: CanvasText; background: Canvas; }
  .hero,
  .offer,
  .site-footer { background: Canvas !important; color: CanvasText !important; }
}