/* ===========================================================
   Targeted responsive overrides
   =========================================================== */

@media (max-width: 1024px) {
  .footer__giant { font-size: clamp(64px, 14vw, 180px); }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .section, .section--tight { padding-block: clamp(56px, 10vw, 96px); }
  .section-heading h2 { font-size: clamp(28px, 7vw, 40px); }
  .section-heading p { font-size: var(--fs-md); }

  .hero__title { font-size: clamp(36px, 9vw, 56px); }
  .hero__desc { font-size: var(--fs-md); }

  .btn { padding: 12px 20px; }
  .btn--lg { padding: 14px 22px; font-size: var(--fs-base); }

  .cta-banner { padding: clamp(48px, 10vw, 80px) clamp(24px, 6vw, 48px); }
  .cta-banner h2 { font-size: clamp(28px, 8vw, 44px); }
  .cta-banner p { font-size: var(--fs-md); }

  .article__body { font-size: var(--fs-md); }
  .article__body h2 { font-size: var(--fs-2xl); }
  .article__body h3 { font-size: var(--fs-lg); }

  /* Testimonial: shrink the giant decorative open-quote so it doesn't read as
     stray vertical bars in the background on small screens. */
  .quote { padding: var(--space-6); }
  .quote__text { font-size: var(--fs-md); }
  .quote::before { font-size: 88px; top: -4px; right: 16px; }

  /* Mockup frame: drop the macOS browser-chrome on mobile (the traffic-light
     dots floated above the screenshot and looked disconnected). Show the
     screenshot raw with rounded corners and a soft shadow instead. */
  .mockup-frame {
    transform: none;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .mockup-frame__bar { display: none; }
  .mockup-frame img { border-radius: var(--radius-lg); }

  .nav__shell { padding: 0 12px; }
  .nav__logo { font-size: var(--fs-sm); }
  .nav__logo svg { width: 24px; height: 24px; }
}

@media (max-width: 480px) {
  /* Hero CTAs: stack instead of squeezing side-by-side, otherwise the
     "Descargar para iPhone" label gets clipped by flex: 1 + nowrap. */
  .hero__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { width: 100%; flex: none; min-width: 0; }
  .store-btns { width: 100%; }
  .store-btn { width: 100%; }
}

/* Legal TOC: the sticky sidebar makes no sense on a phone — collapsing the
   chips with the body is cleaner than the wrap-row that was rendering. */
@media (max-width: 880px) {
  .legal__toc { display: none; }
  .legal__layout { grid-template-columns: 1fr; }
}

/* Download QR card: stack vertically on phone and let the QR breathe. */
@media (max-width: 520px) {
  .download-card__qr {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px;
    gap: var(--space-3);
  }
  .download-card__qr-txt h4 { margin-bottom: 4px; }
}

/* Print */
@media print {
  .nav, .footer, .scroll-cue, .grain { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 24px; }
}