/* ============================================================
   RESPONSIVE.CSS — Breakpoints e ajustes mobile
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .gallery__grid { grid-auto-rows: 180px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root { --header-h: 68px; }

  .nav { display: none; }
  .burger { display: grid; place-items: center; }

  .header__inner { width: min(100% - 2rem, var(--maxw)); }

  /* Nav mobile (off-canvas) */
  .nav.is-open {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--bg-elev); padding: 2rem; border-bottom: 1px solid var(--border);
    z-index: var(--z-header);
  }
  .nav.is-open a { font-size: 1.4rem; color: var(--text); }

  .melon { width: 96px; }

  /* Galeria empilha */
  .gallery__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; }
  .gallery__item--a { grid-column: span 6; grid-row: span 1; }
  .gallery__item--b,
  .gallery__item--c { grid-column: span 6; }
  .gallery__item--d,
  .gallery__item--e,
  .gallery__item--f { grid-column: span 3; }

  .footer__grid { flex-direction: column; }
  .reveal__cta { flex-direction: column; align-items: stretch; }

  /* Benefits — coluna única, 4 cards empilhados */
  .benefits__grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
    gap: 1rem;
  }
  .benefits__grid .card {
    min-height: auto;
    padding: 1.5rem;
  }
  /* Oculta 5º e 6º card no mobile (mantém 4) */
  .benefits__grid .card:nth-child(n+5) { display: none; }

  /* FAQ: oculta melancia animada ao lado do texto */
  .faq__anim { display: none; }
  .faq__layout { grid-template-columns: 1fr; }

  /* Hero empilha: texto centralizado sobre a animação */
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .hero__copy { max-width: 100%; }
  .hero__sub { margin-inline: auto; }
  .hero__product { order: -1; justify-self: center; max-width: 380px; }

  /* Overlay neutro escuro — preserva cores reais da melancia no mobile */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(8,4,3,0.28) 0%,
      rgba(8,4,3,0.18) 35%,
      rgba(8,4,3,0.12) 60%,
      rgba(8,4,3,0.40) 100%);
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 420px) {
  .hero__sub { font-size: 1rem; }
  .gallery__item--d,
  .gallery__item--e,
  .gallery__item--f { grid-column: span 6; }
}

/* ---------- Touch: desativa cursor custom e melon ---------- */
@media (hover: none), (pointer: coarse) {
  .melon { display: none; }
}