/* =======================================================
   responsive.css · Breakpoints
   1240, 1024, 768, 480
   ======================================================= */

/* ===== ≤ 1024px (tablet): hero (texto | celular) + filas parejas en 6 col ===== */
@media (max-width: 1024px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "cta   cta   cta   phone phone phone"
      "cta   cta   cta   phone phone phone"
      "stat1 stat1 stat2 stat2 cuenta cuenta"
      "token token token trade trade trade"
      "prod  prod  prod  prod  prod  prod"
      "steps steps steps steps steps steps";
  }
  .bx-cta { min-height: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ===== ≤ 768px (mobile): apila en 2 columnas ===== */
@media (max-width: 768px) {
  :root { --nav-height: var(--nav-height-sm); }

  .nav-shell { padding: 8px 8px 8px 16px; gap: var(--space-3); }
  .nav-links { display: none; }
  .nav-actions .btn:not(.theme-toggle-btn) { display: none; }
  /* Theme toggle se mantiene visible en mobile, junto al hamburger */
  .nav-toggle { display: inline-flex; }

  .hero { padding-top: calc(var(--nav-height) + var(--space-10)); padding-bottom: var(--space-8); }
  .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }

  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "cta    cta"
      "phone  phone"
      "stat1  stat2"
      "cuenta token"
      "trade  trade"
      "prod   prod"
      "steps  steps";
  }
  .bx-cta { min-height: 240px; }
  .bx-cta h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .bx-cuenta { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .bx-trade { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .bx-trade .chart { min-height: 100px; }

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

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

/* ===== ≤ 480px (mobile chico): todo en una columna ===== */
@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto;
    grid-template-areas:
      "cta"
      "phone"
      "stat1"
      "stat2"
      "cuenta"
      "token"
      "trade"
      "prod"
      "steps";
  }
  .bx-stat-1, .bx-stat-2 { min-height: 110px; }
  .bx-prod .prod-grid { grid-template-columns: 1fr; }
  .bx-steps .steps-row { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: 1fr; }
  .phone-mock { --pw: 240px; --ph: 490px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}