/* ============================================
   RESPONSIVE — Mobile First Breakpoints
   ============================================ */

/* Base: 0-639px (Mobile) — estilos por defecto */

/* --- sm: 640px (Tablet vertical) --- */
@media (min-width: 640px) {
  .container {
    padding: 0 var(--space-xl);
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
}

/* --- md: 768px (Tablet horizontal) --- */
@media (min-width: 768px) {
  .section {
    padding: var(--space-4xl) 0;
  }

  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
}

/* --- lg: 1024px (Desktop) --- */
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-2xl);
  }

  /* Mostrar/ocultar en desktop vs mobile */
  .hide-desktop { display: none; }
  .show-desktop { display: block; }
}

/* --- xl: 1280px (Desktop grande) --- */
@media (min-width: 1280px) {
  h1 { font-size: var(--text-6xl); }
}

/* Mobile utilities */
.hide-mobile { display: none; }
.show-mobile { display: block; }

@media (min-width: 1024px) {
  .hide-mobile { display: block; }
  .show-mobile { display: none; }
}

/* Mobile: tipografía más pequeña */
@media (max-width: 639px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  .section {
    padding: var(--space-3xl) 0;
  }

  .btn--lg {
    padding: 14px 28px;
    font-size: var(--text-base);
  }
}