/* ═══════════════════════════════════════════════════
   POSYMA — Mobile pass overrides (POS-MVP-524)
   Loaded AFTER styles.css on every page that links styles.css,
   so equal-specificity rules here win by cascade order.
   Layout/typography only — no new colors introduced.
   Breakpoints: 480 / 768 / 1024 / 1280 (max-width).
   ═══════════════════════════════════════════════════ */

/* ── Dynamic-viewport heights (vh fallback first, dvh wins where supported) ── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

.uc-hero {
  min-height: 100vh;
  min-height: 100dvh;
}

.lightbox-image {
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
}

/* ── Hero stats may wrap instead of cramming on narrow screens ── */
.hero-stats {
  flex-wrap: wrap;
}

/* ── Mobile signup CTA inside the dropdown menu ──
   The <li class="navbar-cta-mobile"> is hidden on desktop (the inline
   navbar-cta-desktop link covers that) and shown inside the open menu. */
.navbar-cta-mobile {
  display: none;
}

@media (max-width: 768px) {
  .navbar-cta-mobile {
    display: block;
    margin-top: 0.5rem;
  }

  .navbar-cta-mobile .navbar-cta {
    display: flex;
    justify-content: center;
    min-height: 44px;
  }

  /* Dropdown menu: 44px tap rows, scrollable if taller than the viewport */
  .navbar-links {
    gap: 0.35rem;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }

  .navbar-links li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Hamburger: 44px touch target (bars stay 24px, centered) */
  .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Language flags: 44px touch targets (overrides the 32x26 shrink) */
  .lang-option {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }

  /* Secondary pages (404 / legal / under-construction): keep the
     'Volver al sitio' pill visible and comfortably tappable */
  .navbar-cta-return {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
  }

  /* iOS Safari auto-zooms focused fields under 16px — hold the line */
  .mobile-waitlist input[type='email'],
  .contact-field input,
  .contact-field textarea {
    font-size: 16px;
  }

  /* Pricing: keep the Mensual/Anual toggle in view while comparing the
     long single-column stack of cards it controls */
  .billing-toggle {
    position: sticky;
    top: 84px;
    z-index: 20;
  }

  .billing-toggle__btn {
    min-height: 44px;
  }

  /* Plan CTA links: 44px touch target */
  .btn-pricing {
    min-height: 44px;
  }

  /* Lightbox: size against the visible viewport so the bottom
     prev/next buttons clear the Safari toolbar */
  .lightbox {
    height: 100vh;
    height: 100dvh;
  }

  .lightbox-image {
    max-height: calc(100vh - 260px);
    max-height: calc(100dvh - 260px);
  }
}

@media (max-width: 480px) {
  .hero-stats {
    gap: 1.25rem 2rem;
  }
}