/* ==========================================================================
   Gamosa — Responsive rules
   Breakpoints tuned for 1920 / 1440 / 1280 / 1024 / 768 / 480 / 390 / 360.
   Mobile-safe: nothing here may introduce horizontal overflow.
   ========================================================================== */

/* ---------------------------------------------- ≥1600px (1920 screens) --- */
@media (min-width: 1600px) {
  :root {
    --maxw: 1440px;
    --pad-x: 5rem;
  }
  body { font-size: 1.04rem; }
}

/* ---------------------------------------------- ≤1280px ------------------ */
@media (max-width: 1280px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------- ≤1100px ------------------ */
@media (max-width: 1100px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}

/* ---------------------------------------------- ≤1024px (tablet) --------- */
@media (max-width: 1024px) {
  html { scroll-padding-top: 80px; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__media { order: -1; }
  .hero__collage { max-width: 560px; margin-inline: auto; }
  .hero__badge { left: 0; }

  .vision__inner { grid-template-columns: 1fr; }
  .vision__portrait {
    max-width: 320px;
    aspect-ratio: 1 / 1;
  }

  .detail { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .gallery__main img { aspect-ratio: 4 / 3; }

  .contact-grid { grid-template-columns: 1fr; }

  .product-grid,
  .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------- ≤880px: mobile nav ------- */
@media (max-width: 880px) {
  .nav { min-height: 66px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__actions .btn--wa-desktop { display: none; }
  .toolbar { top: 66px; }
  .gallery { top: 86px; }
}

/* ---------------------------------------------- ≤768px ------------------- */
@media (max-width: 768px) {
  :root { --section-y: 3.25rem; }

  h1 { font-size: clamp(2.2rem, 9vw, 3rem); }

  .hero__meta { gap: 1.25rem; margin-top: 2rem; }
  .hero__meta strong { font-size: 1.5rem; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card { min-height: 150px; padding: 1.15rem; }
  .cat-card h3 { font-size: 1.12rem; }

  .why-grid { grid-template-columns: 1fr; }

  .toolbar__row { gap: 0.5rem; }
  .search { flex: 1 1 100%; }
  .select { flex: 1 1 auto; }
  .select select { width: 100%; }

  .detail__actions .btn { flex: 1 1 100%; }

  .footer__bottom { justify-content: center; text-align: center; }
}

/* ---------------------------------------------- ≤560px ------------------- */
@media (max-width: 560px) {
  .product-grid,
  .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

  .product-card__body { padding: 0.85rem 0.9rem 1rem; gap: 0.4rem; }
  .product-card__title { flex-direction: column; gap: 0.25rem; }
  .product-card__title h3 { font-size: 1rem; }
  .price { font-size: 0.82rem; }
  .product-card__desc { -webkit-line-clamp: 2; font-size: 0.8rem; }
  .product-card__actions { grid-template-columns: 1fr; }
  .product-card__actions .btn { width: 100%; }

  .hero__collage { gap: 0.6rem; }
  .hero__badge {
    position: static;
    margin-top: 0.9rem;
    max-width: none;
    box-shadow: var(--shadow-sm);
  }

  .gallery__thumbs button { width: 62px; height: 62px; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__about { grid-column: auto; }

  .wa-float span { display: none; }
  .wa-float { padding: 0.85rem; }
}

/* ---------------------------------------------- ≤400px (390 / 360) ------- */
@media (max-width: 400px) {
  :root { --pad-x: 1rem; }

  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.75rem; }

  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 1.35rem; }
  .brand__tag { font-size: 0.52rem; letter-spacing: 0.18em; }

  .btn-row .btn { flex: 1 1 100%; }

  .cat-grid { grid-template-columns: 1fr; }

  .hero__meta div { min-width: 84px; }

  .breadcrumb { font-size: 0.74rem; }

  .contact-item { padding: 1rem; gap: 0.75rem; }
  .contact-item p { font-size: 0.92rem; word-break: break-word; }
}

/* ---------------------------------------------- ≤340px safety ------------ */
@media (max-width: 340px) {
  .product-grid,
  .product-grid--3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- Print ------------------- */
@media print {
  .site-header, .mobile-menu, .wa-float, .toolbar, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
}