/* =========================================================
   TASING STHALYN — responsive.css
   Breakpoints: 1200px · 1024px · 860px · 600px · 420px
   ========================================================= */

/* ---------- ≤ 1200px ---------- */
@media (max-width: 1200px) {
  .grid-products  { grid-template-columns: repeat(3, 1fr); }
  .grid-benefits  { grid-template-columns: repeat(2, 1fr); }
  .float-1, .float-2 { display: none; }
}

/* ---------- ≤ 1024px (tablet horizontal) ---------- */
@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .burger   { display: block; }
  .mobile-menu { display: flex; }
  .btn-order { display: none; }

  .hero { grid-template-columns: 1fr; padding: 122px 24px 50px; gap: 34px; }
  .hero-visual { min-height: 380px; }
  .hero-text, .hero-stats { max-width: 100%; }

  .steps-wrap  { grid-template-columns: 1fr; gap: 34px; }
  .cta-inner   { grid-template-columns: 1fr; }
  .cta-action  { text-align: left; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ---------- ≤ 860px (tablet vertical) ---------- */
@media (max-width: 860px) {
  .section       { padding: 60px 22px; }
  .cta-section   { padding: 10px 22px 60px; }
  .cta-box       { padding: 34px 26px; border-radius: 28px; }
  .grid-products { grid-template-columns: repeat(2, 1fr); }
  .steps-section { border-radius: 30px; margin-inline: 14px; }

  .modal-box  { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .modal-left { min-height: 260px; }
  .mug.big    { width: 140px; height: 110px; }
  .mug-handle.big { right: calc(50% - 92px); }

  .section-head  { flex-direction: column; align-items: flex-start; }
  .section-note  { display: none; }
}

/* ---------- ≤ 600px (móvil) ---------- */
@media (max-width: 600px) {
  header { padding: 10px 12px; }
  .nav-shell { height: 60px; padding: 0 10px 0 14px; }
  .brand-text small { display: none; }
  .brand-text strong { font-size: 12px; }
  .brand-logo { width: 34px; height: 34px; }

  .hero         { padding: 104px 18px 40px; }
  .hero-title   { font-size: 42px; }
  .hero-stats   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-visual  { min-height: 300px; }
  .tilt-card    { border-radius: 24px; }
  .pill         { font-size: 10.5px; padding: 7px 12px; }

  .section        { padding: 50px 18px; }
  .grid-products  { grid-template-columns: 1fr; }
  .grid-benefits  { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; padding: 40px 20px; }
  .footer-bottom  { padding: 18px 20px; flex-direction: column; }

  .modal        { padding: 12px; }
  .modal-right  { padding: 22px; }
  .modal-left   { padding: 20px; }
  .modal-btns   { grid-template-columns: 1fr; }

  .drawer     { width: 100%; }
  .wa-float   { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-tip     { display: none; }
  .toast      { width: calc(100% - 32px); justify-content: center; }
}

/* ---------- ≤ 420px (móvil pequeño) ---------- */
@media (max-width: 420px) {
  .hero-title { font-size: 36px; }
  .hero-btns .btn { width: 100%; }
  .filters { gap: 6px; }
  .chip-filter { height: 30px; padding: 0 13px; font-size: 11px; }
  .cta-inner h2 { font-size: 24px; }
}