/* mesh — profile growth CTA (docked pill + sticky bar + two-door modal).
   Scoped under .mjc-* and hardened against Astra/Elementor button + link styles.
   Brutalist mesh language: black + mesh paper (#f5f2eb, NOT Linktree cream),
   yellow + purple accents, 2-3px black borders, hard offset shadows. */

.mjc-modal, .mjc-bar, .mjc-docked {
  --blk:#0a0a0a; --paper:#f5f2eb; --paper2:#e7e2d6; --ylw:#ffe135; --pur:#7c3aff; --pur-d:#6a2fe0;
  --fh:'Barlow Condensed', sans-serif; --fb:'Space Grotesk', sans-serif;
  box-sizing:border-box;
}
.mjc-modal *, .mjc-bar *, .mjc-docked * { box-sizing:border-box; }
[hidden].mjc-modal, [hidden].mjc-bar { display:none !important; }

/* Theme reset — neutralize Astra/Elementor defaults. No solid background here
   (each button sets its own !important bg below); only kill gradients/radius. */
.mjc-bar button, .mjc-modal button, .mjc-docked button {
  margin:0; background-image:none !important; border:none; border-radius:0 !important;
  box-shadow:none; -webkit-appearance:none; appearance:none; font-family:var(--fh);
  color:inherit; text-transform:none; letter-spacing:normal; line-height:1; cursor:pointer;
}
.mjc-modal a, .mjc-docked a, .mjc-bar a { text-decoration:none !important; color:inherit !important; box-shadow:none; }

/* ── Docked pill (end of profile) — purple, chunky brutalist shadow ── */
.mjc-docked { display:flex; justify-content:center; padding:56px 20px 88px !important; margin:0 !important; background:transparent; }
.mjc-docked button.mjc-docked-pill {
  display:inline-flex !important; align-items:center; gap:12px;
  background:var(--pur) !important; color:#fff !important;
  border:3px solid var(--blk) !important; box-shadow:8px 8px 0 var(--blk) !important;
  padding:17px 32px !important;
  font-family:var(--fh) !important; font-weight:900 !important; text-transform:uppercase !important;
  font-size:21px !important; letter-spacing:.02em !important; line-height:1 !important;
  transition:transform .12s, box-shadow .12s;
}
.mjc-docked button.mjc-docked-pill:hover { transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--blk) !important; }
.mjc-docked button.mjc-docked-pill:active { transform:translate(3px,3px); box-shadow:4px 4px 0 var(--blk) !important; }
.mjc-mark { color:var(--pur); font-family:var(--fh); font-weight:900; line-height:1; }
.mjc-docked-pill .mjc-mark { color:var(--ylw) !important; font-size:23px; }
.mjc-docked-pill .mjc-arrow { color:#fff !important; font-family:var(--fh); font-weight:900; font-size:21px; }

/* ── Sticky bar — black so it reads against the cream pages, content centered ── */
.mjc-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  background:var(--blk) !important; border-top:3px solid var(--blk);
  transform:translateY(110%); transition:transform .28s cubic-bezier(.2,0,.2,1);
}
.mjc-bar.is-in { transform:translateY(0); }
.mjc-bar-inner {
  max-width:860px; margin:0 auto; display:flex; align-items:center; gap:14px;
  padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
.mjc-bar .mjc-mark { color:var(--ylw); font-size:22px; flex-shrink:0; }
.mjc-bar-cta {
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  text-align:left; padding:0 !important; background:transparent !important;
}
.mjc-bar-txt { font-family:var(--fh); font-weight:800; text-transform:uppercase; font-size:18px; color:var(--paper); line-height:1; }
.mjc-bar-sub { font-family:var(--fb); font-weight:400; font-size:12.5px; color:rgba(245,242,235,.6); line-height:1.2; }
.mjc-go-btn {
  flex-shrink:0; width:40px; height:38px; display:flex !important; align-items:center; justify-content:center;
  background:var(--pur) !important; color:#fff !important; border:2px solid var(--paper) !important;
  font-family:var(--fh); font-weight:900; font-size:18px;
  transition:background .12s, transform .1s;
}
.mjc-go-btn:hover { background:var(--pur-d) !important; }
.mjc-go-btn:active { transform:translateY(1px); }
.mjc-bar-x {
  flex-shrink:0; width:34px; height:34px; display:flex !important; align-items:center; justify-content:center;
  background:transparent !important; color:rgba(245,242,235,.65) !important;
  border:2px solid rgba(245,242,235,.3) !important; font-family:var(--fh); font-weight:900; font-size:14px;
  transition:color .12s, border-color .12s;
}
.mjc-bar-x:hover { color:var(--paper) !important; border-color:var(--paper) !important; }
@media (max-width:560px){ .mjc-bar-sub { display:none; } .mjc-bar-txt { font-size:16px; } .mjc-bar-inner { gap:10px; } }

/* ── Modal ── */
.mjc-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; transition:opacity .18s ease; }
.mjc-modal.is-open { opacity:1; }
.mjc-overlay { position:absolute; inset:0; background:rgba(10,10,10,.62); }
.mjc-card {
  position:relative; width:100%; max-width:720px;
  background:var(--paper); border:3px solid var(--blk); box-shadow:12px 12px 0 var(--blk);
  padding:32px; transform:translateY(10px); transition:transform .2s cubic-bezier(.2,0,.2,1);
}
.mjc-modal.is-open .mjc-card { transform:translateY(0); }
.mjc-x {
  position:absolute; top:16px; right:16px; width:36px; height:36px;
  display:flex !important; align-items:center; justify-content:center;
  background:var(--paper) !important; color:var(--blk) !important;
  border:2px solid var(--blk) !important; box-shadow:3px 3px 0 var(--blk) !important;
  font-family:var(--fh); font-weight:900; font-size:15px;
}
.mjc-x:hover { background:var(--blk) !important; color:var(--paper) !important; }
.mjc-hd { font-family:var(--fh); font-weight:900; text-transform:uppercase; font-size:clamp(32px,4.6vw,48px); letter-spacing:-.01em; line-height:.9; color:var(--blk); }
.mjc-hd .mjc-mark { color:var(--pur); font-size:clamp(26px,3.6vw,40px); }
.mjc-sub { font-family:var(--fb); font-size:15px; font-weight:400; color:#6b6657; margin:9px 0 24px; }
.mjc-doors { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mjc-door {
  display:flex !important; flex-direction:column;
  background:#fff !important; border:2px solid var(--blk); box-shadow:5px 5px 0 var(--blk);
  padding:20px; transition:transform .12s, box-shadow .12s;
}
.mjc-door:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--blk); }
.mjc-door--explore { border-top:6px solid var(--pur); }
.mjc-door--space   { border-top:6px solid var(--ylw); }
.mjc-door-ic { width:26px; height:26px; color:var(--blk); }
.mjc-door--explore .mjc-door-ic { color:var(--pur); }
.mjc-door-ic svg { width:100%; height:100%; display:block; }
.mjc-door-ttl { font-family:var(--fh); font-weight:900; text-transform:uppercase; font-size:clamp(22px,2.5vw,27px); line-height:.98; color:var(--blk); margin:10px 0 7px; }
.mjc-door-body { font-family:var(--fb); font-size:14px; font-weight:400; line-height:1.5; color:#3a3a3a; margin-bottom:18px; }
.mjc-door-btn {
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--blk); color:#fff; border:2px solid var(--blk); padding:14px;
  font-family:var(--fh); font-weight:900; text-transform:uppercase; font-size:17px; letter-spacing:.03em;
}
.mjc-door:hover .mjc-door-btn { background:#1c1c1c; }
@media (max-width:560px){
  .mjc-card { padding:22px; box-shadow:8px 8px 0 var(--blk); }
  .mjc-doors { grid-template-columns:1fr; gap:13px; }
  .mjc-door { padding:16px; }
  .mjc-sub { margin-bottom:18px; }
}

/* "Ya tengo cuenta" — quiet log-in link under the doors */
.mjc-login {
  display:block; text-align:center; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(10,10,10,.12);
  font-family:var(--fb); font-size:13px; font-weight:500;
  color:#3a3a3a !important; text-decoration:none !important;
}
.mjc-login:hover { color:var(--pur) !important; text-decoration:underline !important; }

@media (prefers-reduced-motion: reduce){
  .mjc-bar, .mjc-card, .mjc-modal, .mjc-docked-pill, .mjc-door, .mjc-go-btn { transition:none; }
  .mjc-docked-pill:hover, .mjc-door:hover { transform:none; }
}