/* =======================================================
   responsive.css · Media queries centralizadas
   Breakpoints:
     ≤ 480px   mobile chico
     ≤ 768px   mobile / tablet portrait
     ≤ 1024px  tablet landscape / laptop pequeño
     ≥ 1440px  wide desktop
   ======================================================= */

/* ===== ≤ 1024px (tablet landscape y laptop pequeño) ===== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero-visual { min-height: 540px; order: -1; }
  .phone { transform: rotate(0deg) scale(.95); }

  .app-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .app-visual { order: -1; min-height: 520px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .steps::before { display: none; }
}

/* ===== ≤ 768px (tablet portrait y mobile grande) ===== */
@media (max-width: 768px) {
  :root { --nav-height: var(--nav-height-sm); }

  .nav-links, .nav-cta .btn:not(.nav-toggle-cta) { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-brand .brand-text { display: none; }

  .hero { padding-top: calc(var(--nav-height) + var(--space-8)); min-height: auto; }
  .hero-actions { justify-content: flex-start; }

  /* Hero mobile: copy primero, celular como teaser recortado abajo */
  .hero-copy { order: 1; }
  .hero-visual {
    order: 2;
    min-height: 0;
    height: 340px;
    overflow: hidden;
    align-items: flex-start;
    /* fade hacia abajo para invitar a hacer scroll */
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  }
  .hero-visual .phone-glow { top: -10%; }
  .hero .phone {
    transform: rotate(0deg) scale(0.95);
    margin-top: 0;
  }
  .hero-stats { gap: var(--space-6); }
  .hero-stats .stat strong { font-size: var(--fs-xl); }

  .security-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pillar { padding: var(--space-6); }

  .products-grid { grid-template-columns: 1fr; }
  .product-card { padding: var(--space-6); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  .cta-final h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .cta-final .btn { padding: 14px 28px; font-size: var(--fs-md); }

  .section-head { margin-bottom: var(--space-8); }
}

/* ===== ≤ 480px (mobile chico) ===== */
@media (max-width: 480px) {
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    text-align: center;
  }
  .hero-stats .stat strong { font-size: var(--fs-lg); }
  .hero-stats .stat span { font-size: 10px; }

  .phone { --phone-w: 260px; --phone-h: 540px; }

  .steps { grid-template-columns: 1fr; }

  .faq-q { padding: var(--space-4); font-size: var(--fs-sm); }
  .faq-a > div { padding: 0 var(--space-4) var(--space-4); font-size: var(--fs-sm); }

  .nav-mobile a { font-size: var(--fs-xl); }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== ≥ 1440px (wide desktop) ===== */
@media (min-width: 1440px) {
  .phone { --phone-w: 320px; --phone-h: 660px; }
  .hero-visual { min-height: 700px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Modo landscape mobile (alturas chicas) ===== */
@media (max-height: 600px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + 32px); }
  .hero-visual { min-height: 420px; }
}