/* Lámina del corazón (480 x 300): la lámina y una ficha que sale del rótulo 5. */

.pc-lamina-corazon .lam {
  left: 0;
  top: 0;
  width: 448px;
  height: 276px;
}

/* línea de leyenda, igual en todas las piezas de la fila */
.pc-lamina-corazon .cab {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  font: italic 400 13.5px/20px var(--serifa);
  color: var(--texto-2);
  white-space: nowrap;
}

.pc-lamina-corazon .cab .n {
  font-weight: 600;
  color: var(--ouro-texto);
}

.pc-lamina-corazon .cab .meta {
  margin-left: auto;
  font: 400 12px/16px var(--sans);
  color: var(--texto-3);
}

.pc-lamina-corazon .dib {
  position: absolute;
}

.pc-lamina-corazon .dib svg {
  display: block;
}

/* los tejidos se rellenan después de que el contorno termina */
.pc-lamina-corazon .dib g[fill] {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.pc-lamina-corazon .dib .lm-traco {
  fill-opacity: 0;
  transition: fill-opacity 0.6s ease-out;
}

.pc-lamina-corazon .dib.lleno g[fill] {
  opacity: 1;
}

.pc-lamina-corazon .dib.lleno .lm-traco {
  fill-opacity: 1;
}

.pc-lamina-corazon .guias {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.pc-lamina-corazon .guia {
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-lamina-corazon .punto {
  fill: var(--ouro);
  stroke: #fff;
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  transition:
    opacity 0.2s,
    transform 0.4s var(--mola);
}

.pc-lamina-corazon .punto.on {
  opacity: 1;
  transform: none;
}

.pc-lamina-corazon .halo {
  fill: rgba(243, 230, 207, 0.75);
  stroke: var(--ouro);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  transition:
    opacity 0.3s,
    transform 0.5s var(--saida);
}

.pc-lamina-corazon .halo.on {
  opacity: 1;
  transform: none;
}

.pc-lamina-corazon .onda {
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* rótulos de la lámina: numeral en oro, nombre en cursiva */
.pc-lamina-corazon .rot {
  position: absolute;
  left: 220px;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.35s ease-out,
    transform 0.5s var(--saida);
}

.pc-lamina-corazon .rot.on {
  opacity: 1;
  transform: none;
}

.pc-lamina-corazon .rot .num,
.pc-lamina-corazon .ficha .num {
  min-width: 14px;
  font: 600 12px/1 var(--sans);
  color: var(--ouro-texto);
  font-variant-numeric: tabular-nums;
}

.pc-lamina-corazon .rot i {
  font: italic 400 14px/20px var(--serifa);
  color: var(--texto);
}

/* la ficha: el rótulo 5 se levanta de la lámina */
.pc-lamina-corazon .ficha {
  left: 212px;
  width: 260px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 8px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(184, 140, 80, 0.45) inset, var(--sombra-2);
  opacity: 0;
  transform: translateX(-6px) scale(0.97);
  transform-origin: 8px 50%;
  transition:
    opacity 0.3s ease-out,
    transform 0.55s var(--saida);
}

.pc-lamina-corazon .ficha::after {
  display: none;
}

.pc-lamina-corazon .ficha.on {
  opacity: 1;
  transform: none;
}

.pc-lamina-corazon .ficha .txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pc-lamina-corazon .ficha .txt b {
  font: italic 500 14px/20px var(--serifa);
  color: var(--tinta);
}

.pc-lamina-corazon .ficha .t-mini {
  white-space: nowrap;
}