/* Marketplace AX — página de producto, Liquid Glass. */

.mkt-producto-body { padding-bottom: 0; }
.mkt-producto-main { max-width: 980px; padding-bottom: 110px; }

/* Breadcrumbs: movidos a catalogo.css (Ronda de arreglos visuales) — es un
   componente compartido por toda página pública del módulo (catalogo, producto,
   curso, carrito...), pero solo estaba definido acá. Cualquier página que
   cargara catalogo.css sin producto.css (ej. curso.php) mostraba el color de
   link por defecto del navegador en vez del estilo real. */

/* ── Encabezado ───────────────────────────────────────────────────────── */
.mkt-producto-head { margin-bottom: 22px; }
.mkt-producto-head h1 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 10px;
  text-wrap: balance;
}
.mkt-producto-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--text-muted);
}
.mkt-producto-meta-sep { opacity: .4; }
.mkt-producto-compradores { display: inline-flex; align-items: center; gap: 6px; }
.mkt-producto-compradores i { color: var(--mkt-accent); }

.mkt-compartir-visitante-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--glass-border);
  border-radius: var(--mkt-radius-pill);
  padding: 7px 14px;
  color: var(--text);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--mkt-ease), color .2s var(--mkt-ease);
}
.mkt-compartir-visitante-btn:hover { border-color: var(--mkt-accent); color: var(--mkt-accent); }
.mkt-compartir-visitante-btn.copiado { border-color: #10b981; color: #10b981; }

/* ── Hero: portada + descripción ─────────────────────────────────────── */
.mkt-producto-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 26px;
}
@media (min-width: 760px) {
  .mkt-producto-hero { grid-template-columns: 1fr 1fr; align-items: start; }
}
.mkt-producto-portada {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--mkt-radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--mkt-glass-shadow-sm);
}
.mkt-producto-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-producto-portada-vacia {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  color: rgba(var(--mkt-accent-rgb), .25);
}
.mkt-producto-tipo-badge { position: absolute; top: 14px; left: 14px; }

.mkt-producto-desc { display: flex; flex-direction: column; gap: 14px; }
.mkt-producto-desc .mkt-prod-tienda { font-size: .86rem; font-weight: 600; }
.mkt-producto-desc p { font-size: .92rem; color: var(--text); line-height: 1.7; margin: 0; }

/* Descripción larga — recorte con "Ver más/menos" en vez de estirar toda la página. */
.mkt-desc-wrap { display: flex; flex-direction: column; gap: 6px; }
.mkt-desc-wrap p.mkt-desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-desc-vermas-btn {
  align-self: flex-start;
  background: none; border: none; padding: 0; margin: 0;
  color: var(--mkt-accent); font-family: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer;
}
.mkt-desc-vermas-btn:hover { text-decoration: underline; }

/* Ronda 66 — productos híbridos: qué otro producto propio viene incluido. */
.mkt-producto-incluye {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .84rem; color: var(--text-muted);
  padding: 10px 12px; border-radius: var(--mkt-radius-sm);
  background: rgba(var(--mkt-accent-rgb), .08); border: 1px solid rgba(var(--mkt-accent-rgb), .18);
}
.mkt-producto-incluye i { color: var(--mkt-accent); }

/* ── Tabs de contenido (Contenido/Ventajas/Detalles) ─────────────────── */
.mkt-collapse-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-pill);
  width: fit-content;
}
.mkt-collapse-tab-btn {
  padding: 8px 18px;
  border: none;
  border-radius: var(--mkt-radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--mkt-ease);
}
.mkt-collapse-tab-btn.active { background: var(--mkt-accent); color: #fff; }
.mkt-collapse-tab-panel { display: none; }
.mkt-collapse-tab-panel.active { display: block; animation: mkt-fade-in .3s var(--mkt-ease); }
@keyframes mkt-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Lista collapse (grupos con sublista) y FAQ ──────────────────────── */
.mkt-collapse-list { display: flex; flex-direction: column; gap: 8px; }
.mkt-collapse-item {
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-sm);
  overflow: hidden;
  background: var(--glass-input-bg);
}
.mkt-collapse-item-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mkt-collapse-item-head i { color: var(--text-muted); transition: transform .25s var(--mkt-ease); font-size: .78rem; }
.mkt-collapse-item.open .mkt-collapse-item-head i { transform: rotate(180deg); color: var(--mkt-accent); }
.mkt-collapse-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--mkt-ease);
  padding: 0 16px;
}
.mkt-collapse-item.open .mkt-collapse-item-body { max-height: 800px; padding: 0 16px 15px; }
.mkt-collapse-item-body p { font-size: .85rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.mkt-sublist { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--text-muted); }
.mkt-sublist > li { padding: 6px 0; border-bottom: 1px solid var(--glass-input-border); }
.mkt-sublist > li:last-child { border-bottom: none; }
.mkt-sublist-nested { margin: 8px 0 4px 18px; padding-left: 14px; border-left: 2px solid rgba(var(--mkt-accent-rgb), .25); }
.mkt-sublist-nested > li { padding: 4px 0; border-bottom: none; font-size: .82rem; }

/* ── Vendedor ─────────────────────────────────────────────────────────── */
.mkt-vendedor-box { display: flex; align-items: flex-start; gap: 16px; }
.mkt-vendedor-logo {
  width: 60px; height: 60px;
  border-radius: var(--mkt-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
}
.mkt-vendedor-logo-vacio {
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--mkt-accent-rgb), .1);
  color: var(--mkt-accent);
  font-size: 1.3rem;
}
.mkt-vendedor-box h3 { font-size: .95rem; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.mkt-vendedor-box p { font-size: .85rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ── Evaluaciones ─────────────────────────────────────────────────────── */
/* Card blanco sólido en tema claro — el fondo de vidrio translúcido
   (--glass-bg, 58% opaco) se leía gris/deslavado acá en vez de limpio,
   sobre todo cuando la sección está casi vacía (sin reseñas todavía). */
[data-theme="light"] .mkt-producto-evaluaciones {
  background: #fff;
}
.mkt-eval-resumen { margin-bottom: 16px; }
.mkt-resenas-list { display: flex; flex-direction: column; gap: 12px; }
.mkt-resena {
  padding: 14px 16px;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-sm);
}
.mkt-resena-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mkt-resena-head strong { font-size: .85rem; color: var(--text); }
.mkt-resena p { font-size: .84rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ── Reseñas de clientes (testimonios manuales, reutiliza mkax_checkout_testimonios) ── */
.mkt-prod-testimonios h2 {
  font-size: 1.05rem; display: flex; align-items: center; gap: 8px; color: var(--text); margin-bottom: 14px;
}
.mkt-prod-testimonios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mkt-prod-testimonio {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--mkt-glass-blur));
  backdrop-filter: blur(var(--mkt-glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--mkt-radius-sm);
  padding: 16px;
}
.mkt-prod-testimonio-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mkt-prod-testim-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(var(--mkt-accent-rgb), .18); color: var(--mkt-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.mkt-prod-testimonio-head strong { display: block; color: var(--text); font-size: .88rem; }
.mkt-prod-testim-rating { color: #f59e0b; font-size: .72rem; }
.mkt-prod-testimonio p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

/* ── Galería de fotos adicionales (miniaturas bajo la portada) ───────── */
.mkt-prod-galeria { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mkt-prod-galeria-thumb {
  width: 64px; height: 64px; border-radius: var(--mkt-radius-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; padding: 0; background: none; flex-shrink: 0;
}
.mkt-prod-galeria-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-prod-galeria-thumb.active { border-color: var(--mkt-accent); }

/* ── Carrusel "otros productos" ──────────────────────────────────────── */
.mkt-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.mkt-carousel-card {
  flex: 0 0 170px;
  scroll-snap-align: start;
  text-decoration: none;
  border-radius: var(--mkt-radius-sm);
  overflow: hidden;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  transition: transform .25s var(--mkt-spring), border-color .25s var(--mkt-ease);
}
.mkt-carousel-card:hover { transform: translateY(-3px); border-color: rgba(var(--mkt-accent-rgb), .3); }
.mkt-carousel-card img, .mkt-carousel-card-vacio { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mkt-carousel-card-vacio { display: flex; align-items: center; justify-content: center; color: rgba(var(--mkt-accent-rgb), .3); font-size: 1.6rem; }
.mkt-carousel-card-info { padding: 10px 12px; }
.mkt-carousel-card-info strong { display: block; font-size: .82rem; color: var(--text); margin-bottom: 3px; }
.mkt-carousel-card-info span { font-size: .74rem; color: var(--text-muted); }

/* ── Checkout flotante (siempre visible) ─────────────────────────────── */
.mkt-checkout-spacer { height: 10px; }
.mkt-checkout-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  /* Sin backdrop-filter: al ser fixed y quedar siempre visible durante el
     scroll (página larga con hero/tabs/carrusel), el blur se recomponía en
     cada frame contra un fondo que cambia constantemente — la causa
     principal del lag reportado en esta página. glass-bg-strong ya es lo
     bastante opaco para verse bien sin blur. */
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -12px 30px rgba(2, 8, 24, .25);
}
/* Modo embed (Ronda 24): dentro de un <iframe> sin scroll interno (se
   redimensiona al alto real del contenido, ver script de auto-resize),
   "fixed" quedaría pegado al viewport del iframe en vez de al del sitio
   host — se ve como un rectángulo flotando a mitad de página. En flujo
   normal (sticky sin contenedor con scroll = comportamiento estático). */
.mkt-embed .mkt-checkout-bar { position: sticky; }
.mkt-checkout-bar-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mkt-checkout-bar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-checkout-bar-info strong {
  font-size: .85rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Selector de horario — agenda tipo calendario (Ronda 13) ─────────── */
/* Reemplaza la lista plana de "pastillas" de día de la Ronda 9 por un
   mini-calendario mensual (patrón Calendly/Cal.com). Sin backdrop-filter por
   celda a propósito — hasta 42 celdas repetidas es exactamente el mismo
   anti-patrón de lag ya corregido en catálogo/networking (Rondas 1-3); el
   blur único ya lo aporta el `.mkt-section` que envuelve todo el bloque. */
.mkt-cal { margin: 0 auto 16px; max-width: 300px; }
.mkt-cal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.mkt-cal-title { font-size: .8rem; font-weight: 700; color: var(--text); text-transform: capitalize; }
.mkt-cal-nav {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--glass-input-border); background: var(--glass-input-bg);
  color: var(--text); font-size: .68rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .16s var(--mkt-ease);
}
.mkt-cal-nav:hover:not(:disabled) { border-color: var(--mkt-accent); color: var(--mkt-accent); }
.mkt-cal-nav:disabled { opacity: .3; cursor: default; }
.mkt-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: .6rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3px;
}
.mkt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mkt-cal-day {
  aspect-ratio: 1; border: none; background: transparent; border-radius: var(--mkt-radius-sm);
  color: var(--text); font-family: inherit; font-size: .72rem; font-variant-numeric: tabular-nums;
  cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
  transition: background .16s var(--mkt-ease), color .16s var(--mkt-ease);
}
.mkt-cal-day.mkt-cal-empty { visibility: hidden; cursor: default; }
.mkt-cal-day.disponible::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--mkt-accent);
}
.mkt-cal-day.disponible:hover { background: rgba(var(--mkt-accent-rgb), .14); }
.mkt-cal-day.sel { background: var(--mkt-accent); color: #fff; }
.mkt-cal-day.sel::after { background: #fff; }
.mkt-cal-day.mkt-cal-off { color: var(--text-muted); opacity: .35; cursor: default; }
.mkt-cal-day.hoy:not(.sel) { box-shadow: inset 0 0 0 1px rgba(var(--mkt-accent-rgb), .4); }
.mkt-slots-times { display: flex; gap: 8px; flex-wrap: wrap; }
.mkt-slot-time {
  padding: 8px 14px; border-radius: var(--mkt-radius-pill);
  border: 1px solid var(--glass-input-border); background: var(--glass-input-bg);
  color: var(--text); font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .16s var(--mkt-ease);
}
.mkt-slot-time:hover { border-color: var(--mkt-accent); }
.mkt-slot-time.sel { background: var(--mkt-accent); color: #fff; border-color: var(--mkt-accent); }
.mkt-slot-elegido {
  margin-top: 12px; font-size: .82rem; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.mkt-slot-elegido i { color: var(--mkt-accent); }

/* Texto con formato (negrita, cursiva, listas), descripción corta y etiquetas */
.mkt-rt ul { margin: 6px 0 6px 1.2em; padding: 0; }
.mkt-rt li { margin: 2px 0; }
.mkt-prod-corta { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.mkt-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mkt-etiqueta { font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; }
.mkt-etiqueta:hover { color: var(--mkt-accent, var(--cyan)); border-color: currentColor; }