/* ============================================================
   CATÁLOGO SEUSOMVISUAL - responsive.css
   Ajustes para telas maiores (abordagem MOBILE FIRST)
   ============================================================ */

/* ---------- Smartphones grandes / tablets pequenos ---------- */
@media (min-width: 540px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .grade-compacta { grid-template-columns: repeat(2, 1fr); }

  .grade-categorias { grid-template-columns: repeat(2, 1fr); }

  .whatsapp-flutuante { padding: 0.9rem 1.3rem; }
  .whatsapp-flutuante .rotulo-flutuante {
    display: inline;
    font-weight: 700;
    white-space: nowrap;
  }

  .modal-acoes { flex-direction: row; }
  .modal-acoes .btn { width: auto; flex: 1; }
}

/* ---------- Tablets ---------- */
@media (min-width: 768px) {
  :root { --altura-header: 72px; }

  .marca img { height: 44px; }

  .grade { grid-template-columns: repeat(3, 1fr); }
  .grade-compacta { grid-template-columns: repeat(3, 1fr); }

  .bloco-busca {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .campo-busca { max-width: 360px; flex-shrink: 0; }
  .filtros { justify-content: flex-end; flex: 1; }

  /* Modal vira caixa centralizada */
  .modal { align-items: center; padding: 1.5rem; }
  .modal-caixa { border-radius: calc(var(--raio) + 6px); }
  .modal-conteudo { padding: 1.6rem 1.8rem 1.9rem; }

  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablets na horizontal / notebooks ---------- */
@media (min-width: 992px) {
  /* Menu horizontal: esconde hambúrguer */
  .btn-menu { display: none; }

  .nav-principal {
    position: static;
    transform: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    flex: 1;
  }

  .nav-principal ul {
    flex-direction: row;
    justify-content: center;
    gap: 0.15rem;
  }

  .nav-principal a {
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem;
  }

  .cabecalho-inner { gap: 1.5rem; }

  .btn-whatsapp-cabecalho { display: inline-flex; }

  .grade { grid-template-columns: repeat(4, 1fr); }
  .grade-compacta { grid-template-columns: repeat(4, 1fr); }

  .grade-categorias { grid-template-columns: repeat(4, 1fr); }

  .card-categoria { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .card-categoria img { width: 100%; height: 130px; }
  .card-categoria-seta { align-self: flex-end; }

  /* Modal em duas colunas */
  .modal-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.8rem;
    padding: 2rem;
  }

  .modal-galeria { margin-bottom: 0; align-self: start; position: sticky; top: 0; }

  .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- Desktops / Full HD e maiores ---------- */
@media (min-width: 1300px) {
  .grade { gap: 1.5rem; }
  .grade, .grade-compacta { grid-template-columns: repeat(4, 1fr); }
  .hero { padding-block: 6.5rem 7rem; }
}

/* ---------- Impressão ---------- */
@media print {
  .cabecalho, .hero-botoes, .whatsapp-flutuante, .modal, .faixa-cta, .rodape { display: none !important; }
}