/* ═══════════════════════════════════════════
   RESPONSIVE.CSS — Mobile e Tablet
   NildaMarmitaFit
   
   Breakpoints:
   - Desktop:  > 1024px  (padrão, no layout.css)
   - Tablet:   768px–1024px
   - Mobile L: 480px–768px
   - Mobile S: < 480px
═══════════════════════════════════════════ */

/* ─── TABLET (≤ 1024px) ─── */
@media (max-width: 1024px) {

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    text-align: center;
  }
  .hero-card { display: none; }
  .hero-btns { justify-content: center; }
  .hero-checks { align-items: center; }

  /* Planos — coluna única centrada */
  .planos-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
  .plano-card.destaque { transform: none; }
  .plano-card.destaque:hover { transform: translateY(-6px); }

  /* Benefícios — 2 colunas */
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); }

  /* Galeria — reduz padding inferior para não gerar espaço duplo com a seção Sobre */
  #galeria { padding-bottom: 0; }

  /* Sobre — coluna única */
  .sobre-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .sobre-img-wrap {
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 24px; /* espaço entre foto da Nilda e o subtítulo */
  }

  /* Galeria — 3 colunas no tablet */
  .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 24px; }

  /* Números */
  .numeros-bar { grid-template-columns: repeat(2, 1fr); padding: 36px 28px; gap: 24px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Passos */
  .passos-grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* ─── MOBILE GRANDE (≤ 768px) ─── */
@media (max-width: 768px) {

  /* WhatsApp float — menor no mobile */
  .whatsapp-float { width: 52px; height: 52px; bottom: 20px; right: 20px; }
  .whatsapp-float svg { width: 26px; height: 26px; }

  /* WhatsApp sobe quando cookie banner está visível */
  body:has(.cookie-banner:not(.escondido)) .whatsapp-float { bottom: 110px; }

  /* Tipografia */
  section { padding: 60px 0; }
  .section-header { margin-bottom: 40px; }

  /* Header */
  .nav-desktop { display: none; }
  .hamburger   { display: flex; }

  /* Hero */
  #hero { padding: 100px 0 72px; }
  .hero-titulo { font-size: clamp(2rem, 7vw, 2.8rem); }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-scroll { display: none; }

  /* Check list — força alinhamento à esquerda no mobile */
  .check-list { text-align: left; }

  /* Galeria — 2 colunas no mobile */
  .galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 24px; }
  .galeria-item img { min-height: 120px; background: var(--cinza); }

  /* Passos */
  .passos-grid { grid-template-columns: 1fr; }

  /* Benefícios */
  .beneficios-grid { grid-template-columns: 1fr; }

  /* Depoimentos */
  .depo-grid { grid-template-columns: 1fr; }

  /* Objeções */
  .objecoes-grid { grid-template-columns: 1fr; }

  /* Números */
  .numeros-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 28px 20px;
    gap: 18px;
    margin-top: 44px;
  }
  .numero-item .stat-numero { font-size: 2rem; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .cta-checks { flex-direction: column; align-items: center; gap: 10px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─── MOBILE PEQUENO (≤ 480px) ─── */
@media (max-width: 480px) {

  /* Container com mais respiro */
  .container { padding: 0 18px; }

  /* Tipografia menor */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }

  /* Hero compacto */
  .hero-badge { font-size: .7rem; padding: 6px 12px; }
  .hero-sub   { font-size: .95rem; }

  /* Check list — força alinhamento à esquerda no mobile pequeno */
  .check-list { text-align: left; }

  /* Galeria — 2 colunas no mobile pequeno */
  .galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 18px; }

  /* Cards menores */
  .card { padding: 24px 18px; }
  .plano-card { padding: 28px 20px; }
  .beneficio-card { padding: 22px 18px; }
  .depo-card { padding: 22px 18px; }

  /* Números em 2 colunas */
  .numeros-bar { grid-template-columns: repeat(2, 1fr); }

  /* FAQ */
  .faq-pergunta { font-size: .92rem; padding: 16px 18px; }
  .faq-resposta p { padding: 0 18px 16px; }

  /* Botões */
  .btn { font-size: .9rem; padding: 13px 22px; }
  .btn-lg { font-size: .95rem; padding: 14px 28px; }

  /* Sobre */
  .sobre-badge { right: 0; bottom: -14px; }

  /* Footer mais compacto */
  footer { padding: 44px 0 24px; }
}

/* ─── TOUCH DEVICES — Melhorias de UX ─── */
@media (hover: none) {
  .card:hover,
  .beneficio-card:hover,
  .depo-card:hover,
  .sobre-item:hover,
  .plano-card:hover,
  .objecao-card:hover,
  .galeria-item:hover {
    transform: none;
    box-shadow: none;
  }
  .galeria-item:hover img { transform: none; }

  /* Botões maiores para toque fácil */
  .btn { min-height: 48px; }
  .faq-pergunta { min-height: 56px; }

  /* WhatsApp sempre visível sem animação */
  .whatsapp-float { animation: none; }
}

/* ─── PRINT ─── */
@media print {
  #header, .whatsapp-float, #hero .hero-scroll { display: none; }
  #hero { min-height: auto; padding: 40px 0; }
  section { padding: 32px 0; }
  .btn { box-shadow: none; }
}

/* ─── ACESSIBILIDADE — Redução de movimento ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .whatsapp-float { animation: none; }
}