/* ==========================================================================
   SGÓTICA — responsive.css
   Breakpoints: 1080px (tablet grande) / 980px (tablet) / 600px (mobile)
   ========================================================================== */

/* --------------------------- 1080px --------------------------- */
@media (max-width: 1080px){
  .benefits-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .proof-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .diff-wrap{ gap: 44px; }
  .fc-1{ left: -2%; }
  .fc-2{ right: -2%; }
  .fc-3{ display:none; }
}

/* --------------------------- 980px (tablet) --------------------------- */
@media (max-width: 980px){
  .container{ padding: 0 24px; }

  .nav-links{ display:none; }
  .header-cta .btn-sm.btn-ghost{ display:none; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width: 40px; height:40px;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--white);
  }
  .nav-toggle svg{ width:20px; height:20px; }

  .mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 48px; }
  .mobile-menu-close{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--white); }
  .mobile-menu-close svg{ width:22px; height:22px; }
  .mobile-menu nav{ display:flex; flex-direction:column; gap: 8px; }
  .mobile-menu nav a{
    font-family: var(--font-display); font-size: 26px; color:var(--white);
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .mobile-menu .btn{ margin-top: 32px; width:100%; }

  .hero{ padding: 128px 0 88px; }
  .hero-visual{ margin-top: 64px; }
  .fc-1, .fc-2{ position: static; width: 100%; margin-top: 14px; animation:none; }
  .hero-floats{ display:flex; flex-direction:column; gap:12px; margin-top: 20px; }

  .benefits-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; }

  .diff-wrap{ grid-template-columns: 1fr; }
  .diff-visual{ min-height: 340px; order: 2; }

  .form-grid{ grid-template-columns: 1fr; }
  .cloud-illustration{ margin-top: 48px; }
  .cloud-illustration .fc-1, .cloud-illustration .fc-2{ position: static; width:100%; margin-top: 12px; }
  .cloud-illustration .floating-card{ animation: none; }

  .footer-top{ flex-direction:column; gap: 32px; }
  .footer-cols{ gap: 40px; }
}

/* --------------------------- 600px (mobile) --------------------------- */
@media (max-width: 600px){
  .container{ padding: 0 20px; }
  :root{ --section-pad: 64px; }

  h2{ font-size: 30px; }
  .hero h1{ font-size: 34px; }
  .hero p.lead{ font-size: 15.5px; }

  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }

  .hero-seals{ gap: 16px 22px; }
  .seal{ font-size: 12.5px; }

  .price-new{ font-size: 54px; }
  .offer-card{ padding: 32px 22px; }

  .benefits-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .proof-grid{ grid-template-columns: 1fr; max-width: 340px; }
  .proof-stat{ flex-direction:column; gap:4px; text-align:center; padding: 18px 26px; }
  .proof-stat-label{ border-left:none; padding-left:0; }

  .diff-compare{ max-width: 100%; }

  .demo-play{ width:64px; height:64px; }
  .demo-play svg{ width:20px; height:20px; }

  .gallery-zoom-hint{ opacity:1; transform:scale(1); top:8px; right:8px; width:30px; height:30px; }
  .lightbox-nav{ width:42px; height:42px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
  .lightbox img{ max-height: 70vh; }

  .support-inner .btn{ width:100%; }

  .waitlist-card{ padding: 28px 20px; }
  .form-grid{ gap: 14px; }

  .footer-cols{ flex-direction:column; gap: 28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}