/* ════════════════════════════════════════
   TOPBAR — responsive
════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --topbar-h: 40px; }

  .topbar { padding: 0 36px 0 12px; }

  .topbar__pill { font-size: 11px; padding: 3px 10px; }

  .topbar__text { display: none; }

  .topbar__cta { font-size: 12px; }
}

/* ════════════════════════════════════════
   LAPTOP — 1024px to 1279px
════════════════════════════════════════ */
@media (max-width: 1279px) {
  .container,
  .header__inner,
  .footer__inner {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════════
   TABLET — 768px to 1023px
════════════════════════════════════════ */
@media (max-width: 1023px) {
  :root {
    --text-display:    48px;
    --text-heading-lg: 36px;
    --text-heading:    28px;
  }

  /* Header */
  .header__nav { display: none; }
  .header__actions .btn-primary { display: none; }
  .header__toggle { display: flex; }

  /* Hero */
  .hero { padding-bottom: 120px; }
  .hero__screenshot { margin-bottom: -60px; }

  /* Social proof */
  .social-proof { padding-top: 100px; }
  .social-proof__stats { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-24); }

  /* Features */
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Deep dives — stack vertically */
  .deep-dive__inner,
  .deep-dive__inner--reversed {
    grid-template-columns: 1fr;
    gap: var(--spacing-40);
  }

  .deep-dive__inner--reversed .deep-dive__text { order: 0; }

  /* Methodology */
  .methodology__stats { grid-template-columns: 1fr; gap: var(--spacing-16); }

  /* Testimonials */
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--spacing-32); }
}

/* ════════════════════════════════════════
   MOBILE — < 768px
════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    --text-display:    32px;
    --text-heading-lg: 28px;
    --text-heading:    24px;
    --text-heading-sm: 20px;
  }

  /* Hero */
  .hero { padding: 96px var(--spacing-16) 24px; }
  .hero__screenshot { margin-bottom: -74px; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn-primary,
  .hero__actions .btn-ghost { width: 100%; max-width: 320px; justify-content: center; }

  /* Social proof */
  .social-proof { padding-top: 94px; }
  .social-proof__stats { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-20); }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }

  /* Deep dives */
  .deep-dive__inner { padding: 0 var(--spacing-16); }
  .deep-dive__title { font-size: var(--text-heading-sm); }

  /* Methodology */
  .methodology__stats { grid-template-columns: 1fr; }

  /* Testimonials — 1 col */
  .testimonials__grid { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-card { padding: var(--spacing-24); }
  .pricing-toggle { flex-direction: column; border-radius: var(--radius-cards); }
  .pricing-toggle__option { justify-content: center; }

  /* CTA final */
  .cta-final__title { font-size: var(--text-heading); }
  .cta-final__actions { flex-direction: column; align-items: center; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .footer__bottom { flex-direction: column; text-align: center; }

  /* Section headers */
  .section-header { margin-bottom: var(--spacing-40); }
  .section-header__subtitle { font-size: var(--text-body); }

  /* Mobile sticky CTA bar — empieza invisible, JS la muestra al scrollear */
  .mobile-cta { display: flex; opacity: 0; pointer-events: none; }
  /* Espacio para que el contenido no quede tapado por la barra */
  body { padding-bottom: 80px; }
  .header__actions .btn-outline-nav { display: none; }

  /* Logo centrado en mobile */
  .header__inner { position: relative; }
  .header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .header__logo img { height: 28px; }

  /* Section padding */
  .section { padding: var(--spacing-64) 0; }
}

/* ════════════════════════════════════════
   SMALL MOBILE — < 400px
════════════════════════════════════════ */
@media (max-width: 399px) {
  :root {
    --text-display: 28px;
    --text-heading-lg: 24px;
  }

  .social-proof__stats { grid-template-columns: 1fr; text-align: center; }
}