/* ============================================================
   responsive.css — Breakpoints
   ≥1100 base · 900–1099 · 600–899 · 380–599 · <380
   ============================================================ */

/* ---- 900–1099: hero más ajustado ---- */
@media (max-width: 1099px) {
  .hero { gap: var(--sp-10); }
  .footer__top { gap: var(--sp-10); }
}

/* ---- ≤899: stack, hamburguesa, barra teléfono, 2×2 ---- */
@media (max-width: 899px) {
  :root { --page-pad-x: var(--page-pad-x-m); }

  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .drawer-overlay { display: block; }
  .drawer { display: flex; } /* keep components.css flex-direction:column — block would lay links out inline */

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-10);
  }
  .hero__sub { max-width: none; }

  .steps { grid-template-columns: 1fr 1fr; }
  .step:first-child  { border-radius: var(--radius-md) 0 0 0; }
  .step:nth-child(2) { border-radius: 0 var(--radius-md) 0 0; }
  .step:nth-child(3) { border-radius: 0 0 0 var(--radius-md); }
  .step:last-child   { border-radius: 0 0 var(--radius-md) 0; }

  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }

  .cta-band { flex-direction: column; align-items: flex-start; }

  /* barra fija inferior: deja sitio para no tapar el footer */
  .mobile-bar { display: grid; }
  body { padding-bottom: 72px; }
}

/* ---- 380–599: una sola columna fina ---- */
@media (max-width: 599px) {
  .choice-grid { grid-template-columns: 1fr; }
  .segmented { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1; }
  .form-card { padding: var(--sp-6); }
  .trust-row { gap: var(--sp-6); }
}

/* ---- <380: mínimos ---- */
@media (max-width: 379px) {
  :root { --page-pad-x: 14px; }
  .hero__title { font-size: 34px; }
  /* .big-number ya es fluido (clamp) en components.css — sin override fijo aquí. */
  .form-card { padding: var(--sp-5); }
}

/* ---- Pantallas anchas: contener el hero ---- */
@media (min-width: 1400px) {
  .hero, .section, .cta-band, .lang-bar, .nav { padding-inline: calc((100vw - var(--container-max)) / 2); }
}