/* =========================================================================
   responsive.css — Ajustes por breakpoint (mobile-first en styles.css)
   Cargar SIEMPRE después de styles.css / landing.css
   Breakpoints: 1280px · 1120px (menú) · 1100px · 900px · 720px · 520px
   ========================================================================= */

/* --------------------------------- 1121–1280px: el menú se compacta un poco */
@media (max-width: 1280px) and (min-width: 1121px) {
  .nav__link { padding: var(--sp-2) 6px; }
  .header__phone span { display: none; }
  .header__logo img { height: 66px; }
}

/* ------------------------------------------------- <= 1100px (laptop chica) */
@media (max-width: 1100px) {
  :root { --container-width: 960px; }

  .header__logo img { height: 62px; }
  .header__phone span { display: none; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__col--services { grid-column: span 3; }
}

/* ============ <= 1120px: menú en panel lateral ==========================
   Por debajo de 1120px los nueve enlaces ya no caben junto al logotipo, el
   teléfono y el botón de conversión. En vez de esconder el CTA, el menú pasa
   a panel lateral: el botón de WhatsApp sigue visible en todos los tamaños. */
@media (max-width: 1120px) {
  /* Menú móvil en panel lateral */
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 95;
    width: min(86vw, 340px);
    background: #fff;
    padding: calc(var(--header-h) + var(--sp-5)) var(--sp-5) var(--sp-6);
    box-shadow: -12px 0 40px rgba(8, 59, 89, .16);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    margin-left: 0;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .nav__link {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--color-border);
  }
  .nav__cta { display: block; margin-top: var(--sp-4); }
  .nav__cta .btn { width: 100%; }

  body.nav-open { overflow: hidden; }
}

/* ------------------------------------------------------ <= 900px (tableta) */
@media (max-width: 900px) {
  :root { --header-h: 80px; }

  .hero { padding-top: calc(var(--header-h) + var(--sp-6)); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__media { order: -1; }
  .hero__badge { left: 12px; bottom: 12px; }
  .hero__chip { right: 12px; top: 12px; }
  .hero__features { grid-template-columns: 1fr 1fr; margin-top: var(--sp-7); }

  .benefits { grid-template-columns: 1fr; gap: var(--sp-6); }
  .benefits__media { order: -1; }

  .timeline { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
  .timeline::before { display: none; }

  .branches { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--services { grid-column: auto; }
}

/* -------------------------------------------------------- <= 720px (móvil) */
@media (max-width: 720px) {
  .container { width: min(100% - 2rem, var(--container-width)); }

  .header__phone { display: none; }
  .header__actions .btn { display: none; }

  .hero__actions .btn { flex: 1 1 100%; }
  .hero__points { gap: var(--sp-2) var(--sp-4); }
  .hero__features { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hero__media::before { inset: -4% -4% 6% 4%; }

  .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stat { padding: var(--sp-4) var(--sp-3); }

  .services-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; text-align: left; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4); text-align: left; align-items: start; }
  .step__dot { margin: 0; }
  .step h3 { margin-bottom: var(--sp-1); }

  .branches { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }

  .cta-final__actions .btn { flex: 1 1 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer__bottom { flex-direction: column; gap: var(--sp-3); }

  /* El botón flotante se reduce a icono para no tapar contenido */
  .fab-whatsapp { padding: 14px; right: 16px; bottom: 16px; }
  .fab-whatsapp span { display: none; }
  .to-top { right: 18px; bottom: 82px; }
}

/* -------------------------------------------------- <= 520px (móvil chico) */
@media (max-width: 520px) {
  :root { --border-radius: 14px; --radius-lg: 20px; }

  .header__logo img { height: 54px; }
  .stats { grid-template-columns: 1fr; }
  .hero__badge { position: static; margin-top: var(--sp-4); max-width: none; }
  .gallery__filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-2); }
  .filter-btn { white-space: nowrap; }
  .carousel__controls { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- Impresión */
@media print {
  .header, .nav, .fab-whatsapp, .to-top, .carousel__controls,
  .gallery__filters, .toast, .nav-backdrop { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1rem; }
}