/* ==========================================================================
   responsive.css — Media queries (menú móvil, colapso de rejillas, ajustes)
   ========================================================================== */

/* ----- Tablet / desktop pequeño ----- */
@media (max-width: 960px) {
  .quiz { grid-template-columns: 1fr; }
  .quiz__result { position: static; }
}

/* ----- Móvil: menú colapsable ----- */
@media (max-width: 820px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px var(--gutter) 22px;
    background: rgba(11, 24, 33, .96);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav__menu.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { padding: 12px 4px; font-size: 16px; }
  .nav__cta { justify-content: center; margin-top: 8px; padding: 13px 20px; }

  .hero__mark { opacity: .1; }
  .proceso__head { align-items: flex-start; }

  /* Eficiencia en móvil: el hero arranca más arriba y se detienen las
     animaciones decorativas continuas (halo con blur + flotación) que
     mantienen la GPU activa y gastan batería. */
  .hero { padding-top: clamp(100px, 14vh, 124px); }
  .hero__halo, .hero__mark { animation: none; }
}

/* ----- Móvil chico ----- */
@media (max-width: 560px) {
  /* Ritmo vertical compacto: secciones de 80px → 56px (menos scroll, carga
     percibida más liviana). Solo afecta .section; hero/trust/footer conservan
     su propio padding. */
  :root { --space-section: 56px; }

  /* La píldora "Tecnología · Ventas · Finanzas" ya no se corta en el borde:
     ahora puede pasar a 2 líneas en pantallas estrechas. */
  .hero__eyebrow { flex-wrap: wrap; gap: 8px 12px; }

  .hero__strip { gap: 10px 18px; }
  .hero__actions { gap: 12px; }
  .hero__actions .btn { width: 100%; }
  .finance { flex-direction: column; align-items: flex-start; }
  .footer__top { flex-direction: column; }
  .step__wm { font-size: 7rem; }
}