/* =====================================================================
   MuseRelay — landings (central_pages con plantilla «custom»)
   Estética clara inspirada en musedock.com/cms + acentos de la marca.
   Prefijo mr- para no chocar con el tema.
   ===================================================================== */
.mr-lp { --ink:#1a1530; --text:#4b4763; --muted:#6c6883; --brand:#ff07ff; --violet:#7c3aed; --navy:#1b1433;
  --line:#ebe7f4; --soft:#f8f6fd; --radius:14px;
  color:var(--text); font-size:17px; line-height:1.65; overflow:hidden; }
.mr-lp h1,.mr-lp h2,.mr-lp h3 { color:var(--ink); letter-spacing:-.02em; font-weight:800; }
.mr-lp a { text-decoration:none; }
.mr-lp .container { max-width:1180px; }
.mr-grad { background:linear-gradient(90deg,#d100d1,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Hero claro ---------- */
.mr-hero { position:relative; padding:84px 0 76px;
  background:linear-gradient(135deg,#f6f1ff 0%,#eef1fb 48%,#fdf0fb 100%); }
.mr-hero::before { content:""; position:absolute; top:-45%; right:-12%; width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,7,255,.10) 0%, transparent 68%); pointer-events:none; }
.mr-hero::after { content:""; position:absolute; bottom:-40%; left:-10%; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.08) 0%, transparent 70%); pointer-events:none; }
.mr-hero .container { position:relative; z-index:1; }
.mr-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.mr-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:#fff;
  border:1px solid #eadff9; color:var(--violet); font-size:13px; font-weight:700; box-shadow:0 2px 10px rgba(124,58,237,.08); }
.mr-badge i { color:var(--brand); }
.mr-hero h1 { font-size:clamp(2.1rem,4vw,3.1rem); line-height:1.13; margin:20px 0 18px; }
.mr-hero h1 em { font-style:normal; background:linear-gradient(90deg,#d100d1,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mr-lead { font-size:1.15rem; color:var(--muted); max-width:560px; margin:0 0 30px; }
.mr-actions { display:flex; flex-wrap:wrap; gap:12px; }
.mr-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:10px; font-weight:700; font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.mr-btn:hover { transform:translateY(-1px); }
.mr-btn-primary { color:#fff !important; background:linear-gradient(135deg,#e100e1 0%,#7c3aed 100%); box-shadow:0 10px 26px rgba(124,58,237,.28); }
.mr-btn-primary:hover { box-shadow:0 14px 32px rgba(124,58,237,.36); }
.mr-btn-light { color:var(--ink) !important; background:#fff; border:1px solid #e3dcf1; }
.mr-btn-light:hover { border-color:#c9b5f5; }
.mr-btn-ghost { color:#fff !important; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); }
.mr-btn-ghost:hover { background:rgba(255,255,255,.12); }
.mr-note { margin:18px 0 0; font-size:13.5px; color:var(--muted); }
.mr-note i { color:#22a35a; margin-right:6px; }

/* Conversación de ejemplo (tarjeta blanca) */
.mr-mock { position:relative; background:#fff; border-radius:20px; padding:18px; border:1px solid #ece6f6;
  box-shadow:0 30px 70px rgba(41,24,82,.14), 0 4px 14px rgba(41,24,82,.06); }
.mr-mock-head { display:flex; align-items:center; gap:12px; padding:2px 4px 14px; border-bottom:1px solid #f0ecf7; }
.mr-mock-avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:19px; background:var(--mock-color, linear-gradient(135deg,#e100e1,#7c3aed)); }
.mr-mock-name { color:var(--ink); font-weight:700; font-size:15px; line-height:1.2; }
.mr-mock-status { color:#22a35a; font-size:12px; }
.mr-msgs { display:flex; flex-direction:column; gap:10px; padding:16px 2px 4px; }
.mr-msg { max-width:86%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.45; }
.mr-msg.in { align-self:flex-start; background:#f2f0f7; color:#2c2742; border-bottom-left-radius:4px; }
.mr-msg.out { align-self:flex-end; background:linear-gradient(135deg,#8b3dff,#c21bd6); color:#fff; border-bottom-right-radius:4px; }
.mr-chip { align-self:flex-end; display:inline-flex; align-items:center; gap:8px; margin-top:2px; padding:8px 12px; border-radius:10px;
  background:#eafaf0; border:1px solid #bfe9cf; color:#167a42; font-size:13px; font-weight:700; }
.mr-float { position:absolute; display:flex; align-items:center; gap:8px; padding:9px 13px; background:#fff; border-radius:12px;
  border:1px solid #ece6f6; box-shadow:0 12px 30px rgba(41,24,82,.12); font-size:13px; font-weight:700; color:var(--ink); }
.mr-float i { color:var(--violet); }
.mr-float.f1 { top:-18px; right:24px; }
.mr-float.f2 { bottom:-18px; left:-18px; }

/* ---------- Franja oscura ---------- */
.mr-bar { background:var(--navy); padding:26px 0; }
.mr-bar-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0; }
.mr-bar-list li { display:flex; align-items:center; gap:12px; color:#d9d2ec; font-size:15px; line-height:1.35; }
.mr-bar-list i { width:40px; height:40px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; font-size:17px; color:#ff8bff;
  background:rgba(255,7,255,.12); border:1px solid rgba(255,7,255,.25); }
.mr-bar-list strong { display:block; color:#fff; font-size:15.5px; }

/* ---------- Secciones ---------- */
.mr-section { padding:84px 0; }
.mr-section.alt { background:var(--soft); }
.mr-head { max-width:760px; margin:0 auto 46px; text-align:center; }
.mr-kicker { display:inline-block; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); margin-bottom:10px; }
.mr-head h2 { font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2; margin:0 0 12px; }
.mr-head p { margin:0; color:var(--muted); font-size:1.06rem; }

/* Tarjetas con icono de color (rotan) */
.mr-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.mr-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; height:100%;
  transition:transform .2s ease, box-shadow .2s ease; }
.mr-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(27,21,48,.08); }
.mr-icon { width:48px; height:48px; border-radius:11px; display:grid; place-items:center; font-size:20px; margin-bottom:16px; }
.mr-card:nth-child(6n+1) .mr-icon { background:#f3e8ff; color:#7c3aed; }
.mr-card:nth-child(6n+2) .mr-icon { background:#ffe4fb; color:#c400c4; }
.mr-card:nth-child(6n+3) .mr-icon { background:#e3edff; color:#2f62e6; }
.mr-card:nth-child(6n+4) .mr-icon { background:#dff7ea; color:#178a4b; }
.mr-card:nth-child(6n+5) .mr-icon { background:#fff1dd; color:#d97706; }
.mr-card:nth-child(6n+6) .mr-icon { background:#dff6f8; color:#0e8a97; }
.mr-card h3 { font-size:1.1rem; margin:0 0 8px; }
.mr-card p { margin:0; font-size:15.5px; color:var(--muted); }

/* Pasos */
.mr-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; counter-reset:mrstep; }
.mr-step { position:relative; padding:30px 24px 24px; background:#fff; border-radius:var(--radius); border:1px solid var(--line); }
.mr-step::before { counter-increment:mrstep; content:counter(mrstep); position:absolute; top:-17px; left:24px; width:36px; height:36px;
  border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,#e100e1,#7c3aed);
  box-shadow:0 6px 14px rgba(124,58,237,.3); }
.mr-step h3 { font-size:1.08rem; margin:6px 0 8px; }
.mr-step p { margin:0; font-size:15.5px; color:var(--muted); }

/* Lo que incluye: dos columnas con lista de marcas */
.mr-specs { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.mr-specs h2 { font-size:clamp(1.6rem,2.8vw,2.1rem); line-height:1.2; margin:8px 0 14px; }
.mr-specs-intro { color:var(--muted); margin:0 0 22px; }
.mr-specs-list { list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:6px 22px; }
.mr-specs-list li { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #f1eef7; }
.mr-specs-list li:last-child { border-bottom:none; }
.mr-specs-list li::before { content:""; flex:0 0 22px; height:22px; margin-top:2px; border-radius:50%;
  background:#22a35a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M7.6 13.6 4 10l1.4-1.4 2.2 2.2 6.9-6.9L16 5.3z'/%3E%3C/svg%3E") center/14px no-repeat; }
.mr-specs-list strong { display:block; color:var(--ink); font-size:15.5px; }
.mr-specs-list span { color:var(--muted); font-size:15px; }

/* Caja de código (estilo terminal) */
.mr-code { max-width:760px; margin:0 auto; border-radius:14px; overflow:hidden; background:#151022; box-shadow:0 20px 50px rgba(21,16,34,.25); }
.mr-code-head { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#1f1830; color:#b9b0cf; font-size:13px; }
.mr-code-head span { width:11px; height:11px; border-radius:50%; background:#ff5f57; }
.mr-code-head span:nth-child(2) { background:#febc2e; } .mr-code-head span:nth-child(3) { background:#28c840; }
.mr-code-head em { margin-left:8px; font-style:normal; }
.mr-code pre { margin:0; padding:22px 24px; color:#f1d5ff; font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-all; background:transparent; border:0; }

/* Preguntas */
.mr-faq { max-width:820px; margin:0 auto; }
.mr-faq details { background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.mr-faq details[open] { box-shadow:0 8px 22px rgba(27,21,48,.06); }
.mr-faq summary { list-style:none; cursor:pointer; padding:18px 54px 18px 22px; font-weight:700; color:var(--ink); position:relative; }
.mr-faq summary::-webkit-details-marker { display:none; }
.mr-faq summary::after { content:""; position:absolute; right:22px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--violet); border-bottom:2px solid var(--violet); transform:rotate(45deg); transition:transform .2s ease; }
.mr-faq details[open] summary::after { transform:rotate(-135deg); margin-top:-2px; }
.mr-faq details p { margin:0; padding:0 22px 20px; font-size:15.5px; color:var(--muted); }

/* Seguir leyendo */
.mr-related { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.mr-related a { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border-radius:12px;
  background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:700; transition:border-color .15s ease, transform .15s ease; }
.mr-related a:hover { border-color:#c9b5f5; transform:translateY(-2px); color:var(--ink); }
.mr-related a span { color:var(--violet); font-size:20px; }

/* Llamada final */
.mr-final { padding:80px 0; text-align:center; color:#e6e0f3;
  background:radial-gradient(700px 360px at 50% -10%, rgba(255,7,255,.22), transparent 65%), linear-gradient(135deg,#1b1433 0%,#2c2152 100%); }
.mr-final h2 { color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 12px; }
.mr-final p { color:#c3b9db; font-size:1.08rem; max-width:620px; margin:0 auto 28px; }
.mr-final .mr-actions { justify-content:center; }

/* ---------- Móvil ---------- */
@media (max-width: 991px) {
  .mr-hero { padding:56px 0 64px; }
  .mr-hero-grid, .mr-specs { grid-template-columns:1fr; gap:40px; }
  .mr-cards, .mr-steps, .mr-related { grid-template-columns:1fr; }
  .mr-bar-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mr-steps { gap:34px; }
  .mr-section { padding:62px 0; }
  .mr-float.f2 { left:8px; }
}
@media (max-width: 575px) {
  .mr-lp { font-size:16px; }
  .mr-btn { width:100%; justify-content:center; }
  .mr-bar-list { grid-template-columns:1fr; }
  .mr-float { display:none; }
}