/* ============================================================
   TECNOLINE BAHÍA — RESPONSIVE CSS
   responsive.css

   Mobile-First breakpoints:
   375px  — Mobile pequeño
   480px  — Mobile grande
   768px  — Tablet portrait
   1024px — Tablet landscape
   1366px — Laptop
   1920px — Full HD
   ============================================================ */

/* ============================================================
   FULL HD (1920px+)
   ============================================================ */
@media (min-width: 1920px) {
  :root { --max-width: 1600px; --gutter: 32px; }
  .products-grid    { grid-template-columns: repeat(5, 1fr); }
  .categories-grid  { grid-template-columns: repeat(10, 1fr); }
  .hero-title       { font-size: 5rem; }
}

/* ============================================================
   LAPTOP (1366px)
   ============================================================ */
@media (max-width: 1366px) {
  .products-grid    { grid-template-columns: repeat(4, 1fr); }
  .categories-grid  { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   TABLET LANDSCAPE (1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --gutter: 20px; }

  .header-nav { display: none; }
  .hamburger  { display: flex; }
  .header-wa-btn span { display: none; }
  .header-wa-btn { padding: 8px 12px; }

  .products-grid    { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .categories-grid  { grid-template-columns: repeat(5, 1fr); gap: 12px; }

  .hero-visual { width: 45%; opacity: 0.4; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .cart-layout { grid-template-columns: 1fr 320px; }
  .contact-grid { gap: 32px; }

  .modal-body { grid-template-columns: 1fr; }
  .modal-gallery { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal-product { max-width: 600px; }
}

/* ============================================================
   TABLET PORTRAIT (768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --gutter: 16px;
  }

  section { padding: 56px 0; }

  /* Hero */
  .hero { min-height: 92vh; align-items: flex-end; padding-bottom: 48px; }
  .hero-visual { display: none; }
  .hero-title  { font-size: 2.4rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-stats  { gap: 20px; }
  .hero-stat-number { font-size: 1.3rem; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Categories */
  .categories-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .category-card { aspect-ratio: auto; padding: 14px 8px; gap: 6px; }
  .category-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  .category-name { font-size: 0.72rem; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-item {
    grid-template-columns: 64px 1fr;
    gap: 12px;
  }
  .cart-item > :last-child {
    grid-column: 1 / -1;
  }
  .cart-item-img { width: 64px; height: 64px; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-grid > :first-child { grid-column: 1 / -1; }

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

  /* Section header */
  .section-title { font-size: 1.8rem; }

  /* Header WA btn */
  .header-wa-btn { display: none; }

  /* Page title */
  .page-title-bar h1 { font-size: 1.6rem; }
}

/* ============================================================
   MOBILE GRANDE (480px)
   ============================================================ */
@media (max-width: 480px) {
  :root { --gutter: 14px; }

  /* Hero */
  .hero-title     { font-size: 2rem; }
  .hero-actions   { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats     { display: none; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-info  { padding: 12px; }
  .product-name  { font-size: 0.82rem; }
  .price-current { font-size: 1rem; }
  .btn-add-cart  { font-size: 0.75rem; padding: 8px; }

  /* Categories */
  .categories-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .category-card   { padding: 10px 4px; }
  .category-icon   { width: 34px; height: 34px; font-size: 1rem; }
  .category-name   { font-size: 0.65rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid > :first-child { grid-column: 1; }

  /* Cart */
  .cart-item { padding: 12px; }

  /* Modal */
  .modal-info { padding: 20px; }
  .modal-name { font-size: 1.2rem; }
  .modal-price-current { font-size: 1.7rem; }

  /* WA float — sólo ícono en mobile */
  .wa-float-text { display: none; }
  .wa-float { padding: 14px; }

  /* Footer bottom */
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   MOBILE PEQUEÑO (375px)
   ============================================================ */
@media (max-width: 375px) {
  :root { --gutter: 12px; }

  .hero-title  { font-size: 1.8rem; }
  .hero-tag    { font-size: 0.72rem; }

  .products-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .categories-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .category-icon   { width: 30px; height: 30px; font-size: 0.9rem; border-radius: var(--radius-sm); }
  .category-name   { display: none; }

  .section-title { font-size: 1.5rem; }

  .catalog-filters { gap: 6px; }
  .filter-btn      { padding: 5px 10px; font-size: 0.72rem; }
}

/* ============================================================
   UTILITIES RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hide-mobile  { display: none !important; }
}
@media (min-width: 769px) {
  .show-mobile  { display: none !important; }
  .hide-desktop { display: none !important; }
}

/* ============================================================
   CATALOG PAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .catalog-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .catalog-filters::-webkit-scrollbar { height: 0; }
  .catalog-sort    { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   MODAL — RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-product  {
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%;
    width: 100%;
  }
  .modal-gallery { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 16px; }
  .modal-info    { padding: 20px; }
  .modal-main-img { aspect-ratio: 4/3; }
}

/* ============================================================
   TOUCH IMPROVEMENTS
   ============================================================ */
@media (hover: none) {
  .product-img-overlay { display: none; }
  .btn-add-cart, .btn-wa-quick { opacity: 1; }
  .product-card:active { transform: scale(0.98); }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #site-header, .wa-float, .mobile-nav, .search-overlay { display: none; }
  body { background: #fff; color: #000; }
  .product-card { break-inside: avoid; border: 1px solid #ccc; }
}