Diseño Responsivo y Media Queries

El diseño responsivo hace que tu sitio se adapte automáticamente a cualquier pantalla. Más del 60% del tráfico web mundial viene de móviles, así que un sitio que no funciona bien en móvil pierde más de la mitad de sus visitantes. La etiqueta meta viewport en el HTML es el primer paso obligatorio.

Las media queries son el corazón del diseño responsivo. @media (max-width: 768px) aplica estilos solo en pantallas de 768px o menos. El enfoque mobile-first recomienda diseñar primero para móvil y usar media queries para pantallas más grandes: es más fácil agregar complejidad que quitarla.

/* MOBILE FIRST - empieza desde el móvil */
.contenedor {
  width: 100%;       /* móvil por defecto */
  padding: 0 16px;
  font-size: 16px;
}

/* TABLET (≥ 768px) */
@media (min-width: 768px) {
  .contenedor {
    max-width: 768px;
    margin: 0 auto;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* DESKTOP (≥ 1200px) */
@media (min-width: 1200px) {
  .contenedor {
    max-width: 1200px;
  }
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ORIENTACIÓN */
@media (orientation: landscape) {
  .hero { height: 50vh; }
}

/* PREFERENCIA DARK MODE */
@media (prefers-color-scheme: dark) {
  body { background: #0A0F1E; color: #FFF; }
}