/* ============================================
   RESPONSIVE DESIGN
   Breakpoints: 480px, 768px, 1024px, 1440px
   ============================================ */

/* MÓVILES PEQUEÑOS (≤ 480px) */
@media (max-width: 480px) {
  :root {
    --font-xl: 2rem;
    --font-md: 0.9375rem;
    --font-sm: 0.875rem;
  }
  
  .hero {
    gap: 1rem;
    padding: 1rem;
    width: 95%;
  }
  
  .logo {
    width: 5rem;
    margin-bottom: 0.25rem;
  }
  
  #waitlist-form {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
  
  .form-group {
    flex: none;
    width: 100%;
    max-width: 280px;
  }
  
  #waitlist-form input,
  #waitlist-form button {
    width: 100%;
  }
  
  #waitlist-form button {
    white-space: normal;
    padding: 0.75rem;
    max-width: 280px;
  }
  
  .socials {
    gap: 0.625rem;
    margin-top: 1.25rem;
  }
  
  #popup {
    max-width: calc(100% - 2rem);
    white-space: normal;
    text-align: center;
    padding: 0.75rem 1.25rem;
    top: 15%;
  }
}

/* MÓVILES MEDIANOS Y TABLETAS PEQUEÑAS (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --font-xl: 2.25rem;
    --font-md: 1rem;
  }
  
  .hero {
    gap: 1.125rem;
    width: 92%;
  }
  
  .logo {
    width: 6rem;
  }
  
  #waitlist-form {
    flex-direction: column;
    gap: 0.875rem;
    align-items: center;
  }
  
  .form-group {
    flex: none;
    width: 100%;
    max-width: 320px;
  }
  
  #waitlist-form input,
  #waitlist-form button {
    width: 100%;
    max-width: 320px;
  }
}

/* TABLETAS (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --font-xl: 2.5rem;
  }
  
  .hero {
    max-width: 550px;
  }
  
  .logo {
    width: 6.5rem;
  }
}

/* PANTALLAS GRANDES (≥ 1025px) */
@media (min-width: 1025px) {
  .hero {
    max-width: 700px;
  }
  
  .logo {
    width: 7.5rem;
  }
}

/* PANTALLAS EXTRA GRANDES (≥ 1440px) */
@media (min-width: 1440px) {
  :root {
    --font-xl: 3.5rem;
    --font-md: 1.375rem;
  }
  
  .hero {
    max-width: 800px;
  }
  
  .logo {
    width: 8rem;
  }
}

/* ORIENTACIÓN HORIZONTAL EN MÓVILES */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    gap: 0.75rem;
    padding: 0.75rem;
  }
  
  .hero h1 {
    font-size: 1.5rem;
  }
  
  .hero p {
    font-size: 0.875rem;
  }
  
  .logo {
    width: 3.5rem;
    margin-bottom: 0;
  }
  
  #waitlist-form {
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  
  .form-group {
    flex: 0 1 240px;
  }
  
  #waitlist-form input,
  #waitlist-form button {
    width: auto;
  }
  
  .socials {
    margin-top: 0.75rem;
  }
  
  #popup {
    top: 10%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* SOPORTE PARA DISPOSITIVOS CON NOTCH / SAFE AREA */
@supports (padding: max(0px)) {
  .hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  
  #popup {
    top: max(15%, env(safe-area-inset-top));
  }
}

/* PREFERENCIA DE MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  #waitlist-form button {
    transform: none !important;
  }
  
  #waitlist-form button:hover {
    transform: none !important;
  }
}