/* 04-tarjetas.css
   TARJETAS. La estructura de tres partes: imagen arriba, cuerpo al medio,
   pie abajo. El pie se queda pegado al fondo aunque las tarjetas tengan
   distinto texto: eso se logra con display flex y margin-top auto, no
   igualando alturas a mano.

   NORMALIZADO: se elimino el :root con --tarjeta-* de valores fijos. La
   tarjeta lee los tokens de tokens.css (--c-superficie, --c-borde, --radio,
   --c-foco, --t-normal, --ease-salida, --sombra-media). Ya no hace falta el
   "puente" que repetia en cada pagina:
     :root { --tarjeta-fondo: var(--c-superficie); ... }
   La clase .tarjeta__etiqueta usa el ACENTO del tema en vez de un #111 fijo.
   ========================================================== */

.tarjeta {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  overflow: hidden;
  /* t2: elevacion en hover. Se anima transform y box-shadow, que son baratos. */
  transition: transform var(--t-normal) var(--ease-salida),
              box-shadow var(--t-normal) var(--ease-salida),
              border-color var(--t-normal) var(--ease-salida);
}

.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: var(--c-acento);
}

/* Solo el borde luminoso, sin moverse */
.tarjeta--borde:hover {
  transform: none;
  border-color: var(--c-acento);
}

.tarjeta__media {
  aspect-ratio: 16 / 10;
  background: var(--c-fondo-suave);
  object-fit: cover;
  width: 100%;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--hueco);
  flex: 1;               /* ocupa el alto disponible */
}

.tarjeta__cuerpo > p { flex: 1; }

/* El pie siempre abajo, sin importar el largo del texto */
.tarjeta__pie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--c-borde);
}

/* Etiqueta de esquina, para "nuevo" o "destacado" */
.tarjeta__etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-acento);
  color: var(--c-acento-texto);
  border-radius: var(--radio-pastilla);
  padding: 4px 11px;
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover { transform: none; }
}