/* Marketplace AX — Networking (catálogo de expertos), Liquid Glass. */

.mkt-np-intro {
  text-align: center;
  max-width: 640px;
  margin: 10px auto 28px;
}
/* Vive dentro del banner (mkt-banner-overlay-custom) — el padding/margen
   del banner ya da el espaciado, así que el propio intro no necesita el suyo. */
.mkt-banner-overlay-custom .mkt-np-intro { margin: 0; max-width: 680px; }
.mkt-np-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mkt-accent);
  background: rgba(var(--mkt-accent-rgb), .12);
  border: 1px solid rgba(var(--mkt-accent-rgb), .22);
  border-radius: var(--mkt-radius-pill);
  padding: 6px 14px;
  margin-bottom: 14px;
}
.mkt-np-intro h1 {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; color: var(--text);
  margin: 0 0 10px;
}
.mkt-np-intro p { color: var(--text-muted); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ── Banner CTA (paywall) ─────────────────────────────────── */
.mkt-np-cta-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  margin-bottom: 26px;
  border-radius: var(--mkt-radius);
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .05));
  border: 1px solid rgba(245, 158, 11, .3);
  -webkit-backdrop-filter: blur(var(--mkt-glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--mkt-glass-blur)) saturate(var(--glass-saturate));
  position: sticky;
  top: 90px;
  z-index: 40;
  transition: box-shadow .25s var(--mkt-ease);
}
.mkt-np-cta-banner.mkt-np-banner-stuck { box-shadow: 0 14px 34px rgba(2, 8, 24, .28); }
.mkt-np-cta-banner > i.fa-lock {
  font-size: 1.3rem; color: #f59e0b;
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245, 158, 11, .16);
}
.mkt-np-cta-banner > div { flex: 1; font-size: .85rem; color: var(--text); line-height: 1.5; }
.mkt-np-cta-banner strong { display: block; color: color-mix(in srgb, #f59e0b 65%, var(--text)); margin-bottom: 2px; }
.mkt-np-cta-banner .mkt-btn { flex-shrink: 0; white-space: nowrap; }

/* ── Secciones (Destacados + por categoría) ──────────────────────────── */
/* #mkt-np-grid pasó a ser el contenedor de TODAS las secciones (ya no un
   grid en sí) — el blur de censura (JS de scroll) sigue apuntando a este
   mismo id, así que se queda con la variable y el filtro; cada .mkt-np-grid
   individual (uno por sección) es el que arma la grilla real de cards. */
.mkt-np-secciones { --mkt-np-blur: 0px; display: flex; flex-direction: column; gap: 34px; }
.mkt-np-grid-censurada { filter: blur(var(--mkt-np-blur)); transition: filter .15s linear; }

.mkt-np-seccion-titulo {
  font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -.01em;
  margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
}
.mkt-np-seccion-destacados .mkt-np-seccion-titulo {
  color: #f59e0b;
}
.mkt-np-seccion-destacados .mkt-np-seccion-titulo i { color: #f59e0b; }

/* ── Grid + card ──────────────────────────────────────────── */
.mkt-np-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--mkt-np-card-min, 250px), 1fr));
  gap: 20px;
}
/* "Columnas máximas" (Admin → Configuración → Marketplace) se aplica como
   max-width inline en networking.php, solo cuando el admin fijó un tope
   (0 = automático, sin límite — el grid ocupa el ancho completo como antes).
   Con auto-fill arriba, topar el ancho total topa las columnas en desktop
   sin perder el auto-ajuste responsivo en pantallas angostas. */

.mkt-np-card {
  position: relative;
  /* Sin backdrop-filter por card: con hasta 60 expertos en pantalla, un
     blur+saturate por card (+ GIFs animados) hace que el grid se sienta muy
     lento al hacer scroll. Se usa un fondo más opaco en su lugar (sin blur)
     para conservar el look "glass" sin el costo de GPU por elemento — el
     header/banner/footer (una sola instancia) sí mantienen el blur. */
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-glass-shadow-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  overflow: hidden; /* la imagen respeta el radius del card, sin desbordar */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
  transition: transform .3s var(--mkt-ease), box-shadow .3s var(--mkt-ease), border-color .3s var(--mkt-ease);
}
a.mkt-np-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mkt-glass-shadow);
  border-color: rgba(var(--mkt-accent-rgb), .3);
}

/* La foto/GIF domina el card (~3/4 de su altura) — solo dentro del grid de catálogo.
   El avatar circular chico de la ficha de detalle (.mkt-np-avatar-lg) NO vive dentro de
   .mkt-np-card, así que estas reglas no lo tocan. */
.mkt-np-card > .mkt-np-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  border: none;
  margin: 0;
  display: block;
  flex-shrink: 0;
}
.mkt-np-card > .mkt-np-avatar.mkt-np-avatar-vacia { font-size: 3.4rem; }

.mkt-np-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 18px 20px;
  flex: 1;
}

/* Avatar circular "normal" (ficha de detalle, previsualización en mi-tienda) */
.mkt-np-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--mkt-accent-rgb), .28);
  margin-bottom: 6px;
}
.mkt-np-avatar-vacia {
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--mkt-accent-rgb), .08);
  color: rgba(var(--mkt-accent-rgb), .4);
  font-size: 1.8rem;
}
.mkt-np-avatar-lg { width: 128px; height: 128px; font-size: 2.4rem; }

/* La foto de card sí usa object-fit: cover normal (no la del avatar circular) */
.mkt-np-card > img.mkt-np-avatar { object-fit: cover; }

.mkt-np-nombre { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.mkt-np-headline { font-size: .84rem; color: var(--mkt-accent); font-weight: 600; margin: 0; }
.mkt-np-ubicacion { font-size: .78rem; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 5px; }

.mkt-np-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0; }
.mkt-np-tag {
  font-size: .68rem; font-weight: 600; color: var(--mkt-accent);
  background: rgba(var(--mkt-accent-rgb), .1);
  border: 1px solid rgba(var(--mkt-accent-rgb), .2);
  border-radius: var(--mkt-radius-pill);
  padding: 3px 10px;
}

.mkt-np-bio { font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin: 4px 0; }
.mkt-np-of { font-size: .76rem; color: var(--text); margin: 0; text-align: left; align-self: stretch; }
.mkt-np-of span { font-weight: 700; color: var(--mkt-accent); margin-right: 4px; }

.mkt-np-contactar-btn { margin-top: 10px; width: 100%; justify-content: center; pointer-events: none; }

/* ── Card censurada (paywall placeholder) ────────────────── */
.mkt-np-card-censurada { user-select: none; position: relative; }
.mkt-np-card-censurada .mkt-np-card-body { width: 100%; }
.mkt-np-censor-line {
  height: 10px; border-radius: 6px;
  background: rgba(var(--mkt-accent-rgb), .14);
  margin: 4px 0;
}
.mkt-np-censor-w90 { width: 90%; } .mkt-np-censor-w80 { width: 80%; }
.mkt-np-censor-w70 { width: 70%; } .mkt-np-censor-w50 { width: 50%; }
.mkt-np-censor-tags { display: flex; gap: 6px; margin: 6px 0; }
.mkt-np-censor-tag {
  width: 46px; height: 16px; border-radius: var(--mkt-radius-pill);
  background: rgba(var(--mkt-accent-rgb), .1);
}
.mkt-np-lock-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.06) 60%, rgba(0,0,0,.14) 100%);
  color: rgba(var(--mkt-accent-rgb), .5);
  font-size: 1.4rem;
}

/* ── Página de detalle ────────────────────────────────────── */
/* Breadcrumb centrado solo en la ficha de experto (mkt-np-body) — no toca
   producto.php, que comparte la misma clase .mkt-breadcrumbs alineada a la izquierda. */
.mkt-np-body .mkt-breadcrumbs { justify-content: center; }
.mkt-np-detalle { max-width: 780px; margin: 0 auto; padding-bottom: 60px; }
.mkt-np-detalle-hero {
  display: flex; align-items: center; gap: 22px;
  padding: 26px; margin-bottom: 22px;
}
.mkt-np-detalle-info h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; color: var(--text); }
.mkt-np-detalle-info .mkt-np-headline { font-size: .92rem; }
.mkt-np-detalle-info .mkt-np-ubicacion { margin: 6px 0; }
.mkt-np-detalle-info .mkt-np-tags { justify-content: flex-start; }

.mkt-np-ofbusca { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mkt-np-ofbusca h3 { font-size: .88rem; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.mkt-np-ofbusca h3 i { color: var(--mkt-accent); }
.mkt-np-ofbusca p { font-size: .85rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .mkt-np-ofbusca { grid-template-columns: 1fr; } .mkt-np-detalle-hero { flex-direction: column; text-align: center; } .mkt-np-detalle-info .mkt-np-tags, .mkt-np-detalle-info .mkt-np-ubicacion { justify-content: center; } }

.mkt-np-iframe-wrap {
  border-radius: var(--mkt-radius-sm);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  height: 480px;
  background: rgba(0,0,0,.15);
}
.mkt-np-iframe-wrap iframe { width: 100%; height: 100%; border: 0; }

#mkt-np-contacto textarea {
  width: 100%;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--mkt-font);
  font-size: .88rem;
  resize: vertical;
  margin-bottom: 12px;
}
#mkt-np-contacto textarea:focus {
  outline: none;
  border-color: rgba(var(--mkt-accent-rgb), .5);
  box-shadow: 0 0 0 4px rgba(var(--mkt-accent-rgb), .12);
}

/* ── Comisión de afiliado (badge + tabla + CTA "trabajar") ───────────── */
.mkt-np-comision-badge {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, .14);
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: var(--mkt-radius-pill);
  padding: 3px 10px;
}
/* Overlay sobre el avatar de cada card del catálogo — sin backdrop-filter,
   mismo criterio anti-lag que el resto del grid (hasta 60 cards en pantalla). */
.mkt-np-comision-badge-card {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(2, 8, 24, .25);
}

/* La comisión MÁS ALTA de todo el catálogo (una sola card, no por experto) —
   badge de fuego, pedido explícito del dueño para que salte a la vista.
   Solo animación CSS (emoji + keyframes), sin imagen/SVG nuevo. El emoji
   cubre TODO el fondo del badge (no solo un costado, para no taparle un
   dígito al número) y el % siempre queda legible encima (z-index + relleno
   sólido detrás del texto). */
.mkt-np-comision-fuego {
  padding: 4px 11px;
  background: radial-gradient(circle at 50% 60%, #431407, #1c0701);
  border-color: rgba(251, 146, 60, .8);
  color: #fde68a;
  overflow: visible;
}
.mkt-np-fuego-emoji {
  position: absolute;
  inset: -9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 0;
  filter: drop-shadow(0 0 5px rgba(249, 115, 22, .85));
  animation: mkt-np-fuego-flicker 1.1s ease-in-out infinite;
  pointer-events: none;
}
.mkt-np-comision-fuego .mkt-np-comision-valor {
  position: relative;
  z-index: 1;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 6px rgba(0, 0, 0, .6);
}
@keyframes mkt-np-fuego-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: .85; }
  25%      { transform: scale(1.1) rotate(2deg); opacity: 1; }
  50%      { transform: scale(.94) rotate(-1deg); opacity: .8; }
  75%      { transform: scale(1.06) rotate(3deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-np-fuego-emoji { animation: none; }
}

.mkt-np-comisiones-tabla { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .85rem; }
.mkt-np-comisiones-tabla th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--glass-border);
}
.mkt-np-comisiones-tabla td { padding: 10px; border-bottom: 1px solid var(--glass-border); color: var(--text); }
.mkt-np-comisiones-tabla tr:last-child td { border-bottom: none; }

.mkt-np-trabajar-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-border); }
.mkt-np-link-copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mkt-np-link-copy input {
  flex: 1; min-width: 220px;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--mkt-font);
  font-size: .82rem;
}
/* Botón de Drive (material virgen) — acento dorado a propósito, distinto del
   azul primario/secundario del resto del módulo, para que se lea como
   "recurso valioso" y no como una acción de navegación más. */
.mkt-btn-drive {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .84rem;
  color: #92400e;
  background: rgba(245, 158, 11, .16);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: var(--mkt-radius-pill);
  padding: 9px 16px;
  margin: 4px 0 14px;
  text-decoration: none;
  transition: background .2s var(--mkt-ease), transform .2s var(--mkt-ease);
}
.mkt-btn-drive:hover { background: rgba(245, 158, 11, .26); transform: translateY(-1px); }
:root:not([data-theme="light"]) .mkt-btn-drive { color: #fbbf24; }

.mkt-np-link-label { font-size: .76rem; font-weight: 600; color: var(--text-muted); margin: 14px 0 6px; }
.mkt-np-link-label:first-child { margin-top: 0; }
.mkt-np-link-tag {
  font-size: .74rem; font-weight: 600; color: var(--text);
  flex: 0 0 auto; min-width: 120px; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sección secundaria (Ofrezco/Busco/sitio web) — demotada visualmente,
   ya no es el objetivo principal de la ficha (ver Ronda de afiliados). */
.mkt-np-secundario { opacity: .88; }

/* ── Toggle "perfil visible" (mi-tienda) ──────────────────── */
.mkt-np-toggle { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); cursor: pointer; }
.mkt-np-toggle input { width: 16px; height: 16px; accent-color: var(--mkt-accent); }
.mkt-np-avatar-preview {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(var(--mkt-accent-rgb), .28);
}