/* Integración de HOST con la Fábrica (ver integracion.js). Archivo nuestro: la Fábrica no lo conoce. */

/* Sin un número real, WhatsApp no se ofrece: antes abría `wa.me/` sin destinatario. */
html:not(.mx-wa) #waHelp { display: none !important; }

/* «Entrar» (o «← Mi panel» desde el Hub): mismo lenguaje que los .ibtn de la Fábrica. */
.mx-entrar {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 999px;
  background: #fff; color: var(--ink, #2B1B3D);
  font: 800 14px/1 Nunito, system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  box-shadow: 0 5px 0 rgba(43, 27, 61, .14);
  transition: transform .15s;
}
.mx-entrar:hover { transform: translateY(-1px); }
.mx-entrar:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(43, 27, 61, .14); }
.mx-entrar:focus-visible { outline: 3px solid #8B6CFF; outline-offset: 3px; }

/* Con la exploración abierta, el HUD ya reserva espacio a la derecha; en celulares
   angostos el texto cede para no empujar nada fuera de la pantalla. */
@media (max-width: 480px) {
  .mx-entrar { padding: 0 13px; font-size: 13px; }
}

/* ── El cargador como intro ─────────────────────────────────────────────────────────────────
   Textos que se turnan solo con opacity/transform (corren en el compositor: siguen animándose
   aunque el navegador esté ocupado armando el mundo 3D). Con «reducir movimiento» se ve solo el
   primero, quieto. */
#loader .ld { max-width: min(92vw, 460px); text-align: center; }
.mx-intro { position: relative; width: 100%; min-height: 7.2em; margin-top: 4px; }
.mx-intro-p {
  position: absolute; inset: 0 0 auto 0;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  opacity: 0; transform: translateY(10px);
  animation: mx-intro-p 16s infinite both;
}
.mx-intro-p b { font: 700 24px/1.1 Fredoka, system-ui, sans-serif; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.mx-intro-p span { font: 700 15px/1.45 Nunito, system-ui, sans-serif; opacity: .95; max-width: 34ch; }
@keyframes mx-intro-p {
  0%   { opacity: 0; transform: translateY(10px); }
  3%   { opacity: 1; transform: none; }
  18%  { opacity: 1; transform: none; }
  21%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-intro-p { animation: none; opacity: 0; }
  .mx-intro-p:first-child { opacity: 1; transform: none; }
}

/* Botón «Solicitar mi MORPH» mientras se envía / ya enviado. */
a.buy.mx-enviando { opacity: .7; cursor: progress; }
a.buy.mx-enviada { cursor: default; filter: saturate(.85); }
a.buy[aria-disabled="true"] { pointer-events: none; }

#mx-confirmacion {
  margin: 12px 0 4px; padding: 14px 16px; border-radius: 18px;
  background: #EAFBF2; border: 2px solid #2FC98F; color: #14543A;
}
#mx-confirmacion b { display: block; font-size: 16px; margin-bottom: 4px; }
#mx-confirmacion p { margin: 0; font-size: 14px; line-height: 1.4; }
#mx-confirmacion .mx-pago-link {
  display: inline-block; margin: 10px 8px 0 0; padding: 10px 16px; border-radius: 999px;
  background: #6B3FE0; color: #fff; font-weight: 800; text-decoration: none;
}
#mx-confirmacion .mx-wa-link {
  display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 999px;
  background: #0F7A43; color: #fff; font-weight: 800; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .mx-entrar { transition: none; }
}