/* ==========================================================================
   Media queries generales (ajustes finos por breakpoint)
   Breakpoints: 320, 768, 1024, 1440, 1920
   ========================================================================== */

/* Mobile pequeño */
@media (max-width: 374px) {
  .container { padding: 0 var(--space-sm); }
  .hero__actions { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 40px; }
}

/* Desktop */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container { max-width: 960px; }
}

/* Desktop grande */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
  h1 { font-size: 56px; }
}

/* Ultra wide */
@media (min-width: 1920px) {
  .container { max-width: 1400px; }
}

/* Utilidades responsivas */
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}