/* Publicador Arkan — "Explorá la colección" (trigger + modal + flotante).
   Mismos tokens que front.css: los del tema si existen, con reserva propia
   por si el bloque se muestra fuera de El Santuario. */

.mpa-col-trigger,
.mpa-col-modal,
.mpa-col-flotante {
  --mpa-brass:  var(--brass,  #B08D57);
  --mpa-pale:   var(--pale,   #D6C3A5);
  --mpa-vellum: var(--vellum, #F3EBDD);
  --mpa-panel:  #17130F;
  --mpa-line:   rgba(176, 141, 87, 0.3);
  --mpa-mute:   rgba(243, 235, 221, 0.62);
  font-family: 'Jost', 'Inter', sans-serif;
}

/* ---------- Trigger dentro del artículo ---------- */
.mpa-col-trigger {
  margin: 28px 0;
  padding: 14px 18px;
  border: 1px solid var(--mpa-line);
  border-left: 3px solid var(--mpa-brass);
  border-radius: 4px;
  background: rgba(176, 141, 87, 0.06);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mpa-mute);
}

.mpa-col-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: var(--mpa-brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mpa-col-link:hover,
.mpa-col-link:focus-visible {
  color: var(--mpa-vellum);
}

/* ---------- Modal ---------- */
.mpa-col-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mpa-col-modal[hidden] { display: none; }

.mpa-col-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mpa-col-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(640px, 86vh);
  overflow-y: auto;
  background: var(--mpa-panel);
  border: 1px solid var(--mpa-line);
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  padding: 32px 28px 24px;
}

.mpa-col-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mpa-line);
  background: transparent;
  color: var(--mpa-vellum);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.mpa-col-cerrar:hover,
.mpa-col-cerrar:focus-visible {
  border-color: var(--mpa-brass);
  color: var(--mpa-brass);
}

.mpa-col-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mpa-brass);
  margin: 0 0 8px;
}

.mpa-col-titulo {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.25;
  color: var(--mpa-vellum);
  margin: 0 0 22px;
  padding-right: 30px;
}

.mpa-col-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mpa-col-fila {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--mpa-mute);
  transition: background 0.2s, color 0.2s;
}
a.mpa-col-fila:hover,
a.mpa-col-fila:focus-visible {
  background: rgba(176, 141, 87, 0.1);
  color: var(--mpa-vellum);
}
.mpa-col-item.is-actual .mpa-col-fila {
  background: rgba(176, 141, 87, 0.14);
  color: var(--mpa-vellum);
}

.mpa-col-num {
  flex: 0 0 auto;
  min-width: 20px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  color: var(--mpa-brass);
}

.mpa-col-tit {
  flex: 1 1 auto;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.4;
}

.mpa-col-aqui {
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mpa-brass);
  border: 1px solid var(--mpa-line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

body.mpa-col-bloqueado {
  overflow: hidden;
}

/* ---------- Botón flotante ----------
   bottom: 88px a propósito: el tema ya trae su propio botón fijo de
   WhatsApp en esa misma esquina (.whatsapp-float, ~52px de alto, z-index
   999) — sentado a 20px del borde, éste choca justo encima. Se apila arriba
   con espacio de sobra en vez de competir por el mismo lugar. */
.mpa-col-flotante {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--mpa-line);
  background: var(--mpa-panel);
  color: var(--mpa-vellum);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: border-color 0.25s, transform 0.2s;
}
.mpa-col-flotante[hidden] { display: none; }
.mpa-col-flotante:hover,
.mpa-col-flotante:focus-visible {
  border-color: var(--mpa-brass);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .mpa-col-panel {
    padding: 26px 18px 20px;
  }
  .mpa-col-flotante {
    right: 14px;
    bottom: 78px;
    padding: 10px 16px;
  }
}