En diseño de interfaces no se diseña página a página, sino con componentes: piezas reutilizables (tarjeta, botón, menú, pie) que se combinan. En CSS se construyen igual: un bloque de HTML con una clase y sus estilos, pensados para funcionar en cualquier sitio de la web. Esta lección junta lo que llevas de CSS en cuatro componentes que casi toda web necesita.

Una convención sencilla y muy usada es BEM (bloque, elemento, modificador):

<article class="tarjeta tarjeta--destacada">
  <img class="tarjeta__imagen" src="img/cartel.webp" alt="Cartel del Festival de Otoño">
  <div class="tarjeta__cuerpo">
    <p class="tarjeta__categoria">Cartelismo</p>
    <h3 class="tarjeta__titulo">Festival de Otoño</h3>
  </div>
</article>

• Bloque: el componente (tarjeta).
• Elemento: una parte suya, con dos guiones bajos (tarjeta__titulo).
• Modificador: una variante, con dos guiones (tarjeta--destacada).

Así cada clase dice a qué componente pertenece y los estilos no se pisan entre sí.

.boton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem;
  border: 2px solid var(--color-acento);
  border-radius: 999px;
  background: var(--color-acento); color: white;
  font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.boton:hover { background: color-mix(in oklch, var(--color-acento), black 15%); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 3px solid var(--color-texto); outline-offset: 3px; }
.boton--secundario { background: transparent; color: var(--color-acento); }

Usa <a class="boton"> si lleva a otra página y <button class="boton"> si hace algo en la misma página.

La solución más robusta sin JavaScript: en móvil, el logo arriba y el menú debajo, con los enlaces en fila que saltan de línea si no caben; en escritorio, todo en una fila.

<header class="cabecera">
  <a class="cabecera__logo" href="index.html">Estudio Norte</a>
  <nav aria-label="Principal">
    <ul class="menu">
      <li><a href="trabajos.html">Trabajos</a></li>
      <li><a href="estudio.html">Estudio</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </nav>
</header>

.cabecera { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.menu a { display: inline-block; padding: .5rem 0; }   /* zona de toque cómoda */

@media (min-width: 768px) {
  .cabecera { flex-direction: row; justify-content: space-between; align-items: center; }
}

📌 Nota. El típico menú hamburguesa (un botón que abre y cierra el menú en móvil) necesita JavaScript para ser accesible: un <button> con aria-expanded que cambia al pulsarlo. Lo verás en la lección Eventos. Desconfía de los "trucos" solo con CSS que usan casillas ocultas: suelen fallar con teclado y lector de pantalla.

.pie {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 3rem 1rem; background: var(--color-texto); color: var(--color-fondo);
}
.pie a { color: inherit; }

repeat(auto-fit, minmax(200px, 1fr)) crea tantas columnas como quepan de al menos 200 px: el pie se adapta solo, sin media queries.

Monta una página componentes.html con tu mini sistema de diseño:

1. Variables de color, tipografía y espacio en :root.
2. El botón en dos variantes (principal y secundario), con :hover y :focus-visible.
3. Tres tarjetas de proyecto en una retícula que pase de 1 a 3 columnas.
4. La cabecera con menú y el pie.
5. Revisa con el teclado (tecla Tab) que todo es alcanzable y el foco se ve.

• Estilar por etiqueta (article h3 { … }) en lugar de con clases del componente: al reutilizarlo en otro sitio, se rompe.
• Dar medidas fijas en píxeles a los componentes: deben adaptarse a su contenedor.
• <div> con aspecto de botón: no funciona con teclado ni lector de pantalla.
• Olvidar los estados: :hover, :focus-visible, :active y deshabilitado.