/* ==========================================================================
   30 Dias de Orações pelo Meu Casamento - Responsive & Media Queries
   ========================================================================== */

/* Telas Pequenas / Mobile (< 640px) */
@media (max-width: 639px) {
  .section {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .hero-section {
    padding-top: 36px;
    padding-bottom: 50px;
  }

  .hero-bullets {
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    gap: 12px;
    width: 100%;
    max-width: 380px;
  }

  .hero-bullet-item {
    text-align: left;
    align-items: flex-start;
  }

  .bonus-summary-box {
    padding: 24px 18px;
  }

  .bonus-summary-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 12px;
  }

  .bonus-summary-list li {
    text-align: left;
    align-items: flex-start;
  }

  .btn-cta {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.05rem;
  }

  .offer-card {
    padding: 32px 20px;
  }

  .offer-checklist {
    padding: 16px 18px;
  }

  .guarantee-box {
    padding: 36px 20px;
  }

  .structure-step-card {
    padding: 18px 16px;
    gap: 14px;
  }

  .step-number {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .carousel-arrow {
    display: none; /* No mobile, swipe por toque é mais natural */
  }

  .slide-img-box {
    height: 260px;
  }

  .emotional-quote-box {
    padding: 32px 20px;
  }

  .mockup-floating-badge {
    position: static;
    margin: 16px auto 0 auto;
    width: fit-content;
  }
}

/* Tablets (640px a 1024px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-mockup-wrapper {
    max-width: 580px;
  }

  .slide-img-box {
    height: 320px;
  }
}

/* Desktops Grandes (> 1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1180px;
  }
  
  .hero-title {
    font-size: 3.4rem;
  }
}

/* Acessibilidade para Preferência de Movimento Reduzido */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Otimização de Impressão */
@media print {
  .sticky-mobile-bar,
  .btn-cta,
  .offer-timer-box,
  .carousel-arrow,
  .carousel-dots {
    display: none !important;
  }
}