/* Configuración adicional de responsive design */

/* Breakpoints personalizados */
:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Mejoras para pantallas muy pequeñas (320px - 375px) */
@media (max-width: 375px) {
  /* Ajustes de espaciado */
  .container {
    padding: 0 12px;
  }
  
  /* Tipografía más pequeña */
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1rem !important;
  }
  
  p {
    font-size: 0.8rem !important;
  }
  
  /* Botones más compactos */
  .btn {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    min-height: 36px;
  }
  
  /* Header más compacto */
  .header-content {
    height: 56px !important;
  }
  
  .logo-img {
    height: 45px !important;
  }
  
  /* Hero más compacto */
  .hero {
    padding: 32px 0 48px !important;
  }
  
  .hero-image img {
    height: 180px !important;
  }
  
  /* Cards más compactas */
  .plan-card,
  .benefit,
  .testimonial {
    padding: 16px !important;
  }
  
  /* Grids más compactos */
  .benefits-grid {
    gap: 16px !important;
  }
  
  .plans-grid {
    gap: 16px !important;
  }
}

/* Mejoras para pantallas pequeñas (376px - 639px) */
@media (min-width: 376px) and (max-width: 639px) {
  .container {
    padding: 0 16px;
  }
  
  .hero {
    padding: 48px 0 64px;
  }
  
  .hero-image img {
    height: 220px;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 0.875rem;
  }
}

/* Mejoras para tablets (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .container {
    padding: 0 24px;
  }
  
  .hero-content {
    gap: 48px;
  }
  
  .hero-image img {
    height: 280px;
  }
  
  /* Grids de 2 columnas en tablets */
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* Mejoras para pantallas grandes (1024px+) */
@media (min-width: 1024px) {
  .container {
    padding: 0 32px;
  }
  
  .hero-content {
    gap: 64px;
  }
  
  .hero-image img {
    height: 400px;
  }
  
  /* Grids completos en desktop */
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

/* Mejoras para pantallas extra grandes (1280px+) */
@media (min-width: 1280px) {
  .container {
    padding: 0 48px;
  }
  
  .hero-content {
    gap: 80px;
  }
  
  .hero-image img {
    height: 450px;
  }
}

/* Optimizaciones de rendimiento para móviles */
@media (max-width: 768px) {
  /* Reducir efectos de hover en móviles */
  .btn:hover,
  .card:hover,
  .plan-card:hover {
    transform: none;
  }
  
  /* Desactivar animaciones complejas en móviles */
  .particles-container {
    display: none;
  }
  
  /* Simplificar efectos de parallax */
  .parallax-img {
    transition: none;
  }
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mejoras para modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
  }
}

/* Mejoras para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Mejoras para orientación landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: 24px 0 32px;
  }
  
  .hero-content {
    gap: 24px;
  }
  
  .hero-image img {
    height: 160px;
  }
  
  .header-content {
    height: 60px;
  }
}

/* Mejoras para pantallas ultra anchas */
@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
    padding: 0 64px;
  }
  
  .hero-content {
    gap: 96px;
  }
  
  .hero-image img {
    height: 500px;
  }
}