/* ==========================================================================
   RESPONSIVE — Ajustes generales por breakpoint
   Los ajustes específicos de cada componente viven en su propio archivo CSS;
   aquí solo van ajustes de layout global y tipografía fluida.
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --container-max: 1080px; }
}

@media (max-width: 960px) {
  :root {
    --fs-4xl: 2.7rem;
    --fs-3xl: 2.2rem;
    --fs-2xl: 1.8rem;
    --header-height: 72px;
  }
  section { padding: var(--space-10) 0; }
}

@media (max-width: 640px) {
  :root {
    --fs-4xl: 2.1rem;
    --fs-3xl: 1.8rem;
    --fs-2xl: 1.5rem;
    --space-12: 3.5rem;
  }
  .container { padding: 0 var(--space-4); }
  section { padding: var(--space-8) 0; }
}

@media (max-width: 400px) {
  .btn { padding: 0.8rem 1.3rem; font-size: 0.8rem; }
}