/* =========================================================
   RESPONSIVE — ajustes finos entre breakpoints
========================================================= */

/* Espaçamentos de seção reduzidos em telas pequenas */
@media (max-width: 767px) {
  .section { padding-block: var(--space-7); }
  .cta-band { margin-inline: var(--space-4); padding: var(--space-7) var(--space-5); }
  .product-page { padding-bottom: 110px; } /* espaço para a barra sticky */
}

/* Telas muito estreitas (320–360px) */
@media (max-width: 360px) {
  :root { --container-padding: 16px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}

/* Tablet */
@media (min-width: 768px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Wide desktop */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}

/* Evita overflow horizontal em qualquer breakpoint */
html, body { overflow-x: clip; }