/* ==========================================================================
   Papelito · el personaje
   Componente reutilizable: se usa grande en la apertura y chico en el board.
   Todo su tamaño cuelga de --papelito-w.
   ========================================================================== */

.papelito {
  --papelito-w: 280px;
  position: relative;
  width: var(--papelito-w);
  aspect-ratio: 828 / 851;
  flex: none;
  isolation: isolate;   /* el halo va detrás de las caras, no detrás de la página */
  transition: transform var(--t-base) var(--ease-settle);
}

.papelito[data-view='side'] { aspect-ratio: 877 / 892; }

/* --- Las caras van apiladas y registradas: el swap no mueve la carcasa ---- */
.papelito__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  opacity: 0;
  /* Un parpadeo es instantáneo. Nada de crossfade acá. */
  transition: opacity 0ms;
  pointer-events: none;
}

.papelito[data-view='front'] .papelito__face[data-view='front'],
.papelito[data-view='side']  .papelito__face[data-view='side'] {
  display: block;
}
.papelito__face { display: none; }

.papelito[data-view='front'][data-face='normal'] .papelito__face[data-view='front'][data-face='normal'],
.papelito[data-view='front'][data-face='blink']  .papelito__face[data-view='front'][data-face='blink'],
.papelito[data-view='front'][data-face='love']   .papelito__face[data-view='front'][data-face='love'],
.papelito[data-view='side'][data-face='normal']  .papelito__face[data-view='side'][data-face='normal'],
.papelito[data-view='side'][data-face='blink']   .papelito__face[data-view='side'][data-face='blink'],
.papelito[data-view='side'][data-face='love']    .papelito__face[data-view='side'][data-face='love'] {
  opacity: 1;
}

/* --- Sombra de contacto -------------------------------------------------- */
.papelito::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 62%;
  height: 5.5%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(139, 30, 65, 0.22) 0%, rgba(139, 30, 65, 0) 70%);
  z-index: 0;
  transition: opacity var(--t-base) var(--ease-settle),
              width   var(--t-base) var(--ease-settle);
}

/* --- Interactivo: sólo cuando es un botón -------------------------------- */
.papelito--tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.papelito--tappable:hover  { transform: translateY(-6px) scale(1.015); }
.papelito--tappable:active { transform: translateY(-1px) scale(0.985); transition-duration: var(--t-fast); }

/* --- Halo: la señal de "tocame". Sólo mientras es tappable --------------- */
.papelito--tappable::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: 128%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(237, 88, 128, 0.28) 0%,
              rgba(237, 88, 128, 0.10) 45%,
              rgba(237, 88, 128, 0) 70%);
  animation: papelito-halo 2.6s var(--ease-inout) infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes papelito-halo {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.90); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}

/* El despegue vive en print.css: se va la impresora entera, con el papel
   adentro, no sólo el personaje. */