/* ============================================================
   responsive.css
   Media queries con cambios de comportamiento (no solo retoque).
   - Header pasa a hamburguesa < 768px
   - Hero/grid colapsan a una columna
   - WhatsApp sticky aparece en móvil
   - Grids principales (problem-grid, two-cards, etc.) colapsan
============================================================ */

/* ─── Mobile menu visible / nav links hidden ─────────────── */
@media (max-width: 768px) {
  .nav .nav-link { display: none; }
  .nav .lang-switch { display: none; }
  .menu-toggle { display: inline-flex; }
  .wa-sticky { display: inline-flex; }
}

/* ─── Hero — collapse to single column ───────────────────── */
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 100px;
    padding-bottom: 60px;
    min-height: auto;
  }
  .hero-left  { order: 2; padding-top: 8px; }
  .hero-right { order: 1; min-height: 360px; height: 360px; }
  .hero-words { font-size: clamp(44px, 13vw, 84px); }

  .page-hero { min-height: auto; }
  .page-hero .wrap { grid-template-columns: 1fr; gap: 16px; }
  .page-hero .ph-left  { order: 2; }
  .page-hero .ph-right { order: 1; min-height: 320px; height: 320px; }
}

/* ─── Grid collapses ─────────────────────────────────────── */
@media (max-width: 1000px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .sales        { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .two-cards   { grid-template-columns: 1fr; }
  .match       { grid-template-columns: 1fr; }
  .infra-three { grid-template-columns: 1fr; }
  .steps       { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tl                { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid       { grid-template-columns: 1fr 1fr; }
  .ida               { grid-template-columns: 1fr; }
  .flow-canvas       { height: 520px; }
}
@media (max-width: 520px) {
  .steps        { grid-template-columns: 1fr; }
  .sales        { grid-template-columns: 1fr; }
  .manifesto-ida { grid-template-columns: 1fr; }
  .manifesto-ida > div { border-right: none; }
}
@media (max-width: 500px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* ─── Tap target floor for any anchored CTA ──────────────── */
@media (max-width: 768px) {
  .btn { min-height: 48px; }
  .btn-lg { min-height: 52px; }
}