/* ============================================================
   LAFERRIER — OPERAÇÃO ESQUENTA SÃO JOÃO
   RESPONSIVE.CSS — Mobile-first breakpoints
   ============================================================ */

@media (max-width: 768px) {
  #hero {
    background-image: url('../images/FUNDOCELULAR.webp');
    background-position: center top;
    padding: 44px 0 52px;
  }
  #triggers {
    background-image: url('../images/FUNDOCELULAR.webp');
    background-attachment: scroll;
  }
  .hero-inner        { padding: 0 16px; }
  .hero-seal         { width: 230px; margin-bottom: 18px; }
  .hero-headline     { font-size: clamp(2rem, 10vw, 3.2rem); }
  .hero-headline .price-line { font-size: clamp(2.7rem, 13vw, 4rem); color: #fff !important; }
  .hero-sub          { font-size: .96rem; }

  /* CTA visível no mobile — largura total, tamanho máximo */
  .btn-vip {
    font-size: 1.25rem;
    padding: 16px 28px;
    width: 100%;
    max-width: 400px;
    margin-top: 22px;
  }

  /* Carousel full width mobile */
  .carousel-section  { width: 100vw; margin-left: 0; }
  .pill-card         { width: 168px; padding: 14px 10px; }
  .pill-card span    { font-size: .76rem; }

  .triggers-inner    { padding: 0 16px; }
  .triggers-title    { font-size: clamp(1.65rem, 7vw, 2.4rem); }
  .trigger-item      { padding: 15px 16px; gap: 12px; }
  .trigger-item img.check { width: 24px; height: 24px; }
  .trigger-text      { font-size: .96rem; }
  .bottom-cta-text   { font-size: clamp(1rem, 4vw, 1.3rem); }
}

@media (max-width: 640px) {
  .hero-seal         { width: 200px; }
  .event-badge       { font-size: .72rem; padding: 6px 14px; }
  .urgency-line      { font-size: .82rem; padding: 7px 16px; }
  .btn-vip           { font-size: 1.15rem; padding: 15px 24px; width: 100%; max-width: 360px; }
  .carousel-section::before,
  .carousel-section::after { width: 50px; }
  .trigger-item      { padding: 13px 14px; }
  .trigger-text      { font-size: .9rem; }
}

@media (max-width: 380px) {
  .hero-seal         { width: 180px; }
  .hero-headline     { font-size: 1.9rem; }
  .hero-headline .price-line { font-size: 2.6rem; color: #fff !important; }
  .btn-vip           { font-size: 1.05rem; padding: 14px 20px; }
  .event-badge       { font-size: .68rem; letter-spacing: .1em; }
}