/* ============================================================
   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; }
  /* La fila del nav la comparten ahora el logo, el idioma, el acceso y la
     hamburguesa. Medido en un móvil de 393 px: con el hueco de escritorio la
     hamburguesa se salía 5 px y `body { overflow-x: hidden }` la recortaba —
     el mismo fallo silencioso del hero, en otra fila. El logo puede encoger
     (`min-width: 0`) antes que empujar a nadie fuera de la pantalla. */
  .nav { gap: var(--sp-3); }
  .nav .logo { min-width: 0; }
  .drawer-overlay { display: block; }
  .drawer { display: flex; } /* keep components.css flex-direction:column — block would lay links out inline */

  /* `minmax(0, 1fr)`, never a bare `1fr` — this is the rule that was breaking the
     phone layout: the track kept the min-content width of the wizard card (419px
     on a 393px screen) and `.hero { overflow: hidden }` silently cut the extra
     26px off. See the note on .hero in layout.css. */
  .hero {
    grid-template-columns: minmax(0, 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 */
  /* flex y no grid: con `grid-template-columns` fijas, la barra sólo cuadra si
     el número de botones es EXACTAMENTE el previsto — y WhatsApp aparece o no
     según haya número guardado. Con flex, la conversión se queda con lo que
     sobre lleve la barra dos botones o tres. */
  .mobile-bar { display: flex; }
  body { padding-bottom: 72px; }
  /* …y el banner de consentimiento del core se sube por encima de ella. Los dos
     son `position: fixed; bottom: 0`, así que sin esto se tapan justo donde hay
     menos sitio. El core resta este mismo valor de su margen de área segura, de
     modo que el hueco del indicador de inicio no se cuenta dos veces. */
  :root { --cc-offset-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- 380–599: una sola columna fina ---- */
@media (max-width: 599px) {
  .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, .nav { padding-inline: calc((100vw - var(--container-max)) / 2); }
}