/* =====================================================================
   COMPONENTE · tarjeta
   Qué hace:    caja con fondo de superficie, borde suave y esquinas de
                12 px. El relleno cambia con la densidad (cómoda o compacta).
   Quién lo usa: todas las pantallas.
   Depende de:  tokens.css
   Requisitos:  R-GEN-13
   Uso:         <article class="tarjeta"><h3 class="tarjeta__titulo">…</h3></article>
   ===================================================================== */

.tarjeta {
  padding: var(--relleno-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
  box-shadow: var(--sombra-baja);
}

.tarjeta__titulo {
  margin-bottom: var(--espacio-2);
  font-size: var(--tamano-m);
}

.tarjeta__texto {
  margin: 0;
  color: var(--color-texto-suave);
}

.tarjeta--resaltada {
  background: var(--color-superficie-resaltada);
  box-shadow: inset 3px 0 0 var(--color-acento);
}