/* ==========================================================================
   Finde · Revelar planes (D-34, la forma A de D-32; D-35 la extiende)
   Mientras el cerebro responde, la lista ya tiene la forma de lo que viene:
   tarjetas reales con el texto convertido en barras y un brillo que cruza.
   Al llegar, cada tarjeta sale de su silueta en su mismo lugar —la foto de
   borrosa a nítida, las etiquetas con un pop, el precio rodando— y al
   apretarla baja y vuelve con resorte. No suma tiempo: todo pasa mientras
   igual se estaba esperando, o encima de lo que ya se puede tocar.
   Se usa con js/revelar.js, en el contenedor de la lista (clase .revelar).

   Sirve para las tres tarjetas de plan de la app: .plan-card (Inicio, la
   Grilla de Encontrar), .hcard (Planes) y .deck-card (Revelar).
   ========================================================================== */

.revelar .plan-card,
.revelar .hcard {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  /* Al soltar vuelve con resorte; al apretar baja rápido y sin rebote. */
  transition: transform 620ms var(--spring-vivo), box-shadow var(--dur-base) var(--ease);
}
.revelar .plan-card:active,
.revelar .hcard:active { transform: scale(.975); transition: transform 90ms var(--ease); }
/* La carta de Revelar se arrastra: su transform es del gesto, no del toque. */

/* --- De silueta a tarjeta -------------------------------------------------
   D-141 · Jerson, viendo un skeleton en vivo: "los cards de los skeletons no
   deberían tener duración ni distancia ya puesta" — .plan-card__meta (la fila
   "Dura X · Y min de casa", D-72) se renombró desde .plan-card__logistics y
   esta lista nunca se actualizó: el texto real quedaba sin convertirse en
   barra gris, mezclado con el resto de la tarjeta que sí carga bien. */
.revelar :is(.plan-card__title, .plan-card__desc, .plan-card__where, .plan-card__meta,
             .price__amount, .price__label,
             .hcard__title, .hcard__desc, .hcard__meta, .hcard__stars,
             .deck-card__body .title-lg, .deck-card__desc, .deck-card__razon, .deck-card__foot .body-sm) {
  border-radius: 6px;
  transition: color 300ms var(--ease) var(--revelar-retardo, 0ms),
              background-color 300ms var(--ease) var(--revelar-retardo, 0ms);
}
.revelar :is(.plan-card__where, .plan-card__meta, .hcard__meta, .hcard__stars, .deck-card__razon, .deck-card__foot .body-sm) i {
  transition: opacity 300ms var(--ease) var(--revelar-retardo, 0ms);
}
.revelar :is(.plan-card__media, .hcard__media) { overflow: hidden; }
.revelar :is(.plan-card__media, .hcard__media, .deck-card__media) img {
  transition: opacity 420ms var(--ease) var(--revelar-retardo, 0ms),
              filter 560ms var(--ease) var(--revelar-retardo, 0ms),
              transform 700ms var(--ease) var(--revelar-retardo, 0ms);
}
.revelar :is(.plan-card__badges, .hcard__badge-left, .hcard__badge-right, .hcard__body .badge, .deck-card__badges) {
  transform-origin: left center;
  transition: opacity 180ms var(--ease) calc(var(--revelar-retardo, 0ms) + 180ms),
              transform 700ms var(--spring-vivo) calc(var(--revelar-retardo, 0ms) + 180ms);
}

.revelar__silueta { pointer-events: none; }
.revelar__silueta :is(.plan-card__title, .plan-card__desc, .plan-card__where, .plan-card__meta,
                      .price__amount, .price__label,
                      .hcard__title, .hcard__desc, .hcard__meta, .hcard__stars,
                      .deck-card__body .title-lg, .deck-card__desc, .deck-card__razon, .deck-card__foot .body-sm) {
  /* !important: algunas piezas traen su color en línea (el pie de la carta de Revelar). */
  color: transparent !important;
  background-color: var(--ink-50);
}
.revelar__silueta :is(.plan-card__where, .plan-card__meta, .hcard__meta, .hcard__stars, .deck-card__razon, .deck-card__foot .body-sm) i { opacity: 0; }
.revelar__silueta :is(.plan-card__media, .hcard__media, .deck-card__media) img { opacity: 0; filter: blur(14px); transform: scale(1.08); }
.revelar__silueta :is(.plan-card__badges, .hcard__badge-left, .hcard__badge-right, .hcard__body .badge, .deck-card__badges) { opacity: 0; transform: scale(.7); }
/* Un brillo que cruza: dice "esto está llegando", no "esto se trabó". */
.revelar__silueta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .75) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: revelar-brillo 1.6s var(--ease) infinite;
  animation-delay: var(--revelar-retardo, 0ms);
  pointer-events: none;
}
@keyframes revelar-brillo { to { transform: translateX(100%); } }

/* --- Precio que rueda hasta su valor -------------------------------------- */
.revelar .price__amount { font-variant-numeric: tabular-nums; }
.revelar-rueda { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
.revelar-rueda__tira { display: block; transition: transform 680ms var(--spring-suave); }
.revelar-rueda__tira span { display: block; height: 1.1em; line-height: 1.1em; }

/* Lo que un lector de pantalla oye mientras espera. */
.revelar__estado {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}