/* ============================================================================
   DEMO · find · estilos específicos (pilar 01, acento violeta)
   Tarjeta buscador clara con barra de ventana, input con caret, resultado
   patrocinado y esqueletos con shimmer. Solo tokens; prefijo .demo--find.
   ========================================================================== */

/* ---- tarjeta buscador -------------------------------------------------------- */
.demo--find .df-browser {
  width: min(320px, 86%);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 0.8rem 0.8rem 0.9rem;
  display: grid;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--find .df-browser.is-on { opacity: 1; transform: none; }

.demo--find .df-bar { display: flex; gap: 0.32rem; padding: 0.1rem 0.15rem 0; }
.demo--find .df-bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

/* ---- input de búsqueda ------------------------------------------------------- */
.demo--find .df-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  color: var(--ink);
  min-height: 2.2rem;
}
.demo--find .df-search svg {
  width: 14px; height: 14px;
  flex: none;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
}
.demo--find .df-search__text { min-width: 0; white-space: nowrap; overflow: hidden; }
.demo--find .df-ph { font-style: normal; color: var(--ink-faint); }

/* ---- filas colapsadas: la tarjeta crece al entrar cada resultado -------------- */
.demo--find .df-row {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.demo--find .df-row--ad.is-on { max-height: 140px; }
.demo--find .df-row--skel.is-on { max-height: 48px; }

/* ---- resultado patrocinado --------------------------------------------------- */
.demo--find .df-result {
  margin-top: 0.6rem;
  background: var(--lavender-light);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
  border-radius: 14px;
  padding: 0.6rem 0.7rem 0.65rem;
  display: grid;
  gap: 0.42rem;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.3s var(--ease-out) 0.08s, transform 0.45s var(--ease-spring) 0.08s;
}
.demo--find .df-row.is-on .df-result { opacity: 1; transform: none; }

.demo--find .df-result__meta { display: flex; align-items: center; gap: 0.45rem; }
.demo--find .df-spons {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--violet);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
}
.demo--find .df-result__meta small {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.demo--find .df-result__main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.demo--find .df-result__id { display: grid; gap: 0.18rem; line-height: 1.2; min-width: 0; }
.demo--find .df-result__id b {
  font-size: 0.82rem;
  font-weight: 640;
  color: var(--ink);
  white-space: nowrap;
}
.demo--find .df-stars { display: inline-flex; align-items: center; gap: 1.5px; }
.demo--find .df-stars svg { width: 10px; height: 10px; fill: var(--amber); }
.demo--find .df-stars small {
  margin-left: 0.3rem;
  font-size: 0.62rem;
  font-weight: 560;
  color: var(--ink-soft);
}

.demo--find .df-call {
  margin-left: auto;
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--violet);
  color: #fff;
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--violet) 35%, transparent);
  transition: transform 0.14s var(--ease), background 0.14s var(--ease);
}
.demo--find .df-call svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--find .df-call.is-pressed { transform: translateY(2px) scale(0.95); background: var(--violet-deep); }

/* ---- esqueletos de la competencia -------------------------------------------- */
.demo--find .df-skel {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
  padding: 0 0.25rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s var(--ease-out) 0.08s, transform 0.38s var(--ease-scene) 0.08s;
}
.demo--find .df-row.is-on .df-skel { opacity: 1; transform: none; }
.demo--find .df-skel__dot {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.demo--find .df-skel__bars { display: grid; gap: 0.3rem; flex: 1; min-width: 0; }
.demo--find .df-skel__bars i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  position: relative;
  overflow: hidden;
}
.demo--find .df-skel__a { width: 72%; }
.demo--find .df-skel__b { width: 46%; }
.demo--find .df-row--skel:nth-child(3) .df-skel__a { width: 58%; }
.demo--find .df-row--skel:nth-child(3) .df-skel__b { width: 38%; }
.demo--find .df-row--skel:nth-child(4) .df-skel__a { width: 66%; }
.demo--find .df-row--skel:nth-child(4) .df-skel__b { width: 30%; }

/* shimmer sutil, easing suave (nunca linear) */
.demo--find .df-row.is-on .df-skel__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg,
    transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
  animation: df-shimmer 1.8s var(--ease) infinite;
}
@keyframes df-shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---- notas flotantes --------------------------------------------------------- */
.demo--find .dm-note--ring { top: 0.1rem; right: -1.2rem; }
.demo--find .dm-note--gpt { bottom: -0.1rem; left: -1.4rem; max-width: 17rem; }

/* el teléfono suena: campanazo corto del icono al entrar la nota */
.demo--find .dm-note--ring.is-on .dm-note__icon {
  animation: df-ring 1.1s var(--ease) 2;
  transform-origin: 50% 20%;
}
@keyframes df-ring {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-13deg); }
  38% { transform: rotate(11deg); }
  58% { transform: rotate(-7deg); }
  78% { transform: rotate(4deg); }
}

/* pill chiquito dentro de la nota de ChatGPT */
.demo--find .df-pill {
  display: inline-block;
  margin-top: 0.18rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
}

@media (max-width: 720px) {
  .demo--find .dm-note--ring { right: -0.2rem; }
  .demo--find .dm-note--gpt { left: -0.2rem; }
}

/* ============================================================================
   r3.1 · FOTO MINIMA (unico agregado sobre el find r2 aprobado):
   avatar del negocio en la esquina superior derecha de la tarjeta, sobre el
   espacio vacio de la fila SPONSORED. Es ABSOLUTO: cero impacto en el layout
   aprobado (la fila del nombre no tiene holgura). Entra con la tarjeta.
   ========================================================================== */
.demo--find .df-result { position: relative; } /* solo ancla; no pinta nada */
.demo--find .df-avatar {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--paper-raised);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--violet) 20%, transparent);
}
.demo--find .df-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }