Ejercicio: Diseño responsivo

Objetivo

Hacer responsiva una página con un enfoque mobile-first: ancho fluido, titular con clamp(), cuadrícula que pasa de 1 a 2 y 4 columnas, y una cabecera que cambia de columna a fila.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

<header class="cab"><strong class="marca">Mi sitio</strong>
  <nav class="menu"><a href="#">Inicio</a><a href="#">Cursos</a><a href="#">Blog</a></nav></header>
<main class="contenido">
  <h1 class="titulo">Un diseño que se adapta</h1>
  <section class="tarjetas">
    <article class="tarjeta">A</article><article class="tarjeta">B</article>
    <article class="tarjeta">C</article><article class="tarjeta">D</article>
  </section>
  <img class="foto" alt="Imagen de ejemplo" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Crect width='1200' height='600' fill='%234f46e5'/%3E%3C/svg%3E">
</main>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; font-family: system-ui, sans-serif; }. Pruebas a 400px de ancho (como en un celular).
• Haz que .contenido use width: min(100% - 2rem, 70rem) y esté centrado con margin-inline: auto.
• Haz que .titulo tenga un tamaño fluido con clamp(1.5rem, 1rem + 4vw, 3rem).
• Base (móvil): .tarjetas es una cuadrícula de una columna con gap: 12px.
• A partir de 600px: .tarjetas pasa a 2 columnas. A partir de 960px: 4 columnas (escribe las dos media queries min-width).
• Haz que .foto ocupe el 100% del ancho, con height: auto y sin desbordarse (max-width: 100%).
• En móvil, .cab apila la marca y el menú en columna; a partir de 600px los coloca en fila con display: flex y justify-content: space-between.

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }

.contenido {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

.titulo { font-size: clamp(1.5rem, 1rem + 4vw, 3rem); }

.tarjetas {
  display: grid;
  gap: 12px;
}
.tarjeta { background: #eef2ff; padding: 20px; border-radius: 12px; }

.foto { display: block; max-width: 100%; height: auto; }

.cab { display: grid; gap: 8px; padding: 12px 16px; }

@media (min-width: 600px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .cab { display: flex; justify-content: space-between; align-items: center; }
}

@media (min-width: 960px) {
  .tarjetas { grid-template-columns: repeat(4, 1fr); }
}