/* ═══════════════════════════════════════════════════════════════
   MOODREX — sistema de diseño
   Violeta tinta y cian. El proceso se lee como una línea de tiempo
   horizontal y las dudas van resueltas en la propia portada.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --sand:#141024;
  --sand-2:#1C1733;
  --sand-3:#262040;
  --ink:#F4F1FF;
  --ink-2:#B4ADD4;
  --mute:#847BA8;
  --line:#2C2549;
  --line-2:#3D3563;
  --accent:#5EE7FF;
  --accent-2:#123644;
  --accent-ink:#08202A;
  --ok:#4ADE9B;
  --ok-bg:#10301F;
  --wait:#FFC46B;
  --wait-bg:#332512;
  --bad:#FF7A8A;
  --bad-bg:#3A1620;

  --fd:"Barlow","Hanken Grotesk",system-ui,sans-serif;
  --fs:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --wrap:1160px;
  --gut:clamp(1.25rem,4vw,3rem);
  --bar:68px;
  /* Alto homologado de todo control de una linea. */
  --ctrl:3.25rem;

  --r:0;
  --r-lg:0;
  --r-pill:0;

  --ease:cubic-bezier(.32,.72,.28,1);
  --t:.2s var(--ease);
}


*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body.mx{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--fs);font-size:1rem;line-height:1.68;
  overflow-x:hidden;
  /* La barra y la cinta son fijas: se les reserva su altura
     para que ningún contenido nazca debajo de ellas. */
  padding-block-start:var(--bar);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis:none;
  -webkit-tap-highlight-color:transparent;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
p,li,dd,figcaption,label,small{text-wrap:pretty}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
@supports (scrollbar-color: auto){html{scrollbar-color:var(--line-2) var(--sand);scrollbar-width:thin}}

.mx-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--r) 0}
.mx-skip:focus{left:0;top:0}

.mx-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mx-i{fill:currentColor;flex:none}

/* ── Escala tipográfica ──────────────────────────────────────── */
.mx-d1{font-size:clamp(2.25rem,5.2vw,3.875rem);letter-spacing:-.035em;line-height:1.06;font-weight:800}
.mx-d2{font-size:clamp(1.625rem,3vw,2.375rem);letter-spacing:-.03em;font-weight:700}
.mx-d3{font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:700}
.mx-lead{font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:var(--ink-2);line-height:1.72;max-width:56ch}
.mx-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fs);font-size:.6875rem;
  letter-spacing:.02em;color:var(--accent);background:var(--accent-2);
  border-radius:var(--r-pill);padding:.4375rem .875rem;margin-bottom:1.125rem;
  justify-self:start;inline-size:fit-content}
.mx-num,.mx-tbl .n,.mx-stat__v,.mx-quote__r b,.mx-kv dd,.mx-otp input{
  font-family:var(--fs);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ── Botones ─────────────────────────────────────────────────── */
.mx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8125rem 1.5rem;font-size:.9375rem;font-weight:700;
  border:1.5px solid transparent;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.mx-btn:active{transform:translateY(1px)}
.mx-btn--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mx-btn--solid:hover{background:#FFB944;border-color:#FFB944}
.mx-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.mx-btn--ghost:hover{border-color:var(--ink);background:var(--sand-3)}
.mx-btn--quiet{background:var(--sand-3);color:var(--ink);border-color:transparent}
.mx-btn--quiet:hover{background:var(--line)}
.mx-btn--wide{width:100%}
.mx-btn--lg{padding:1.0625rem 2rem;font-size:1rem}
.mx-btn--danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.mx-btn--danger:hover{background:var(--bad);color:#fff}
.mx-btn[disabled],.mx-btn:disabled{background:var(--sand-3);color:var(--mute);border-color:transparent;
  cursor:not-allowed;pointer-events:auto}

/* ── Barra superior ─────────────────────────────────────────── */
.mx-top{position:fixed;inset:0 0 auto;z-index:95;background:var(--sand);
  border-bottom:1px solid var(--line)}
.mx-top__in{max-width:var(--wrap);margin:0 auto;height:var(--bar);padding-inline:var(--gut);
  display:flex;align-items:center;gap:1rem}
.mx-top__act{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.mx-top__act .mx-btn{padding:.5625rem 1.0625rem;font-size:.875rem}
.mx-top__act .mx-burger{width:2.375rem;height:2.375rem}

.mx-logo{display:inline-flex;align-items:center;gap:.5625rem;font-family:var(--fd);font-weight:700;
  font-size:1.3125rem;letter-spacing:-.02em}
.mx-word{letter-spacing:-.02em}
.mx-mark{width:1.5rem;height:1.5rem;flex:none;color:var(--accent)}

.mx-nav{display:none;gap:.25rem;margin-inline:auto;font-size:.9375rem;font-weight:500}
.mx-nav a{padding:.4375rem .8125rem;border-radius:var(--r-pill);color:var(--ink-2);
  transition:color var(--t),background var(--t)}
.mx-nav a:hover{color:var(--ink);background:var(--sand-3)}

.mx-lang{display:none;align-items:center;gap:.125rem;background:var(--sand-3);border-radius:var(--r-pill);padding:.1875rem}
.mx-lang a{padding:.3125rem .6875rem;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;
  color:var(--mute);transition:background var(--t),color var(--t)}
.mx-lang a:hover{color:var(--ink)}
.mx-lang a.is-on{background:var(--accent);color:var(--accent-ink)}
.mx-lang--foot,.mx-lang--menu{display:inline-flex;margin-top:1rem;
  align-self:start;justify-self:start;inline-size:fit-content}

.mx-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;align-items:center;
  width:2.625rem;height:2.625rem;flex:none;padding:0;background:var(--sand-3);border:0;
  border-radius:var(--r-pill);cursor:pointer;transition:background var(--t)}
.mx-burger:hover{background:var(--line-2)}
.mx-burger span{display:block;width:15px;height:2px;border-radius:0;background:var(--ink)}

.mx-close{display:inline-flex;align-items:center;justify-content:center;
  width:2.625rem;height:2.625rem;flex:none;padding:0;background:var(--sand-3);color:var(--ink);
  border:0;border-radius:var(--r-pill);cursor:pointer;transition:background var(--t)}
.mx-close:hover{background:var(--line-2)}

/* ── Menú ────────────────────────────────────────────────────── */
.mx-menu{position:fixed;inset:0;z-index:120;background:var(--sand);
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;transform:translateY(2%);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mx-menu[hidden]{display:none}
.mx-menu.is-on{opacity:1;transform:none}
.mx-menu__bar{height:var(--bar);display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);flex:none}
.mx-menu__nav{flex:1;display:flex;flex-direction:column;justify-content:center;padding:1.5rem var(--gut)}
.mx-menu__nav a{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;
  font-family:var(--fd);font-size:clamp(1.75rem,7vw,2.75rem);font-weight:800;letter-spacing:-.035em;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),color var(--t);transition-delay:var(--d,0s)}
.mx-menu.is-on .mx-menu__nav a{opacity:1;transform:none}
.mx-menu__nav a:hover{color:var(--accent)}
.mx-menu__nav em{font-family:var(--fs);font-size:.6875rem;font-style:normal;color:var(--mute)}
.mx-menu__foot{padding:0 var(--gut) 3rem;display:grid;gap:.625rem;flex:none;max-width:24rem}
.mx-menu__meta{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;margin-top:1rem;font-size:.875rem;color:var(--ink-2)}

/* ── Secciones ───────────────────────────────────────────────── */
.mx-sec{padding-block:clamp(3.5rem,8vw,6rem)}
.mx-head-block{display:grid;gap:1rem;max-width:52ch;margin-bottom:2.5rem;justify-items:start}
.mx-eyebrow em{font-style:normal;color:var(--mute);margin-inline-end:.5rem}
.mx-head-block--tight{margin-bottom:1.75rem}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── Portada: la cifra es la imagen ──────────────────────────── */
.mx-hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem);position:relative;overflow:hidden}

.mx-hero h1{margin-block:.25rem 1.25rem;max-width:15ch}
.mx-hero h1 span{display:block}
.mx-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.mx-hero__grid{display:grid;gap:2.5rem}
/* Halo del acento en la esquina. Sin imagen, sin lienzo. */
.mx-hero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inline-size:min(46rem,120%);aspect-ratio:1;inset-block-start:-18%;inset-inline-end:-14%;
  background:radial-gradient(circle,rgba(31,93,69,.10),transparent 62%)}
.mx-hero > *{position:relative;z-index:1}

/* ── Tarjetas ────────────────────────────────────────────────── */
.mx-grid{display:grid;gap:1rem}
.mx-card{background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem;display:grid;gap:.625rem;align-content:start;
  transition:border-color var(--t),background var(--t)}
.mx-card:hover{border-color:var(--line-2);background:var(--sand-3)}
.mx-card__ic{width:2.75rem;height:2.75rem;display:grid;place-items:center;flex:none;
  background:var(--accent-2);color:var(--accent);border-radius:var(--r-pill);margin-bottom:.5rem}
.mx-card h3{font-size:1.1875rem}
.mx-card p{color:var(--ink-2);font-size:.9375rem}
.mx-card__tag{font-family:var(--fs);font-size:.6875rem;color:var(--accent);margin-top:.25rem}

/* ── Proceso ─────────────────────────────────────────────────── */
.mx-steps{display:grid;gap:1rem;counter-reset:paso}
.mx-step{background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;display:grid;grid-template-columns:auto 1fr;column-gap:1.125rem;gap:.375rem}
.mx-step__n{grid-row:span 3;display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:none;
  background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);
  font-family:var(--fs);font-size:.75rem;font-weight:500}
.mx-step h3{font-size:1.0625rem}
.mx-step p{color:var(--ink-2);font-size:.9375rem}

/* ── Garantías ───────────────────────────────────────────────── */
.mx-split{display:grid;gap:2rem;align-items:start}
.mx-list{display:grid;gap:.75rem}
.mx-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;
  background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r);padding:1.125rem 1.25rem}
.mx-list svg{color:var(--accent);margin-top:.25rem}
.mx-list strong{display:block;font-size:1rem;font-weight:700;margin-bottom:.25rem}
.mx-list span{color:var(--ink-2);font-size:.9375rem}

/* ── Línea de tiempo del proceso ─────────────────────────────
   Horizontal y arrastrable: el proceso se lee como un recorrido,
   no como cuatro tarjetas apiladas. */
.mx-line{display:flex;gap:1rem;overflow-x:auto;padding-block:.5rem 1.25rem;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.mx-line::-webkit-scrollbar{display:none}
.mx-line__i{flex:0 0 min(19rem,82%);scroll-snap-align:start;position:relative;
  background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;display:grid;gap:.5rem;align-content:start}
.mx-line__n{display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.25rem;block-size:2.25rem;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--fs);font-size:.8125rem;font-weight:700;margin-bottom:.375rem}
.mx-line__i h3{font-size:1.0625rem}
.mx-line__i p{color:var(--ink-2);font-size:.9375rem}
/* El conector se dibuja entre tarjeta y tarjeta, no dentro. */
.mx-line__i::after{content:"";position:absolute;inset-inline-start:100%;inset-block-start:2.625rem;
  inline-size:1rem;block-size:1px;background:var(--line-2)}
.mx-line__i:last-child::after{display:none}
.mx-line__hint{font-family:var(--fs);font-size:.6875rem;color:var(--mute);margin-top:.25rem}

/* ── Preguntas frecuentes ────────────────────────────────────
   Las dudas que frenan un alta, resueltas antes del formulario. */
.mx-qas{display:grid;gap:.625rem}
.mx-qa{background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r);
  padding:0 1.25rem;transition:border-color var(--t)}
.mx-qa[open]{border-color:var(--line-2)}
.mx-qa summary{display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding-block:1.125rem;font-weight:600;font-size:1rem;cursor:pointer;list-style:none}
.mx-qa summary::-webkit-details-marker{display:none}
.mx-qa summary::after{content:"";inline-size:.625rem;block-size:.625rem;flex:none;
  border-inline-end:2px solid var(--accent);border-block-end:2px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--t)}
.mx-qa[open] summary::after{transform:rotate(-135deg)}
.mx-qa p{color:var(--ink-2);font-size:.9375rem;padding-block:0 1.25rem;max-width:62ch}

.mx-slab{background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem)}
.mx-slab h3{font-size:1.1875rem;margin-bottom:1.25rem}
.mx-slab dl{margin:0}
.mx-kv{display:flex;justify-content:space-between;gap:1rem;padding:.875rem 0;
  border-bottom:1px solid var(--line);font-size:.9375rem}
.mx-kv:last-child{border-bottom:0}
.mx-kv dt{color:var(--ink-2)}
.mx-kv dd{margin:0;white-space:nowrap;font-weight:600}
.mx-kv dd.is-prose{white-space:normal;font-family:var(--fs);text-align:end}

/* ── Formularios ─────────────────────────────────────────────── */
.mx-field{display:grid;gap:.4375rem;margin-bottom:1.125rem;align-content:start}
.mx-field > label{font-size:.875rem;font-weight:600;color:var(--ink)}
.mx-field small{font-size:.8125rem;color:var(--mute)}
.mx-in,.mx-sel,.mx-ta{width:100%;background:var(--sand-2);color:var(--ink);border-radius:var(--r);
  border:1.5px solid var(--line-2);border-radius:var(--r);padding:.8125rem 1rem;
  font:400 .9375rem/1.4 var(--fs);transition:border-color var(--t)}
.mx-in:hover,.mx-sel:hover,.mx-ta:hover{border-color:var(--mute)}
.mx-in:focus,.mx-sel:focus,.mx-ta:focus{outline:none;border-color:var(--accent)}
.mx-in::placeholder,.mx-ta::placeholder{color:var(--mute)}
.mx-ta{min-height:7.5rem;resize:vertical}
.mx-sel{appearance:none;padding-inline-end:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.mx-in--num{font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}

.mx-amount{position:relative}
.mx-amount__cur{position:absolute;inset-inline-start:1rem;inset-block:0;display:flex;align-items:center;
  font:500 .75rem/1 var(--fs);color:var(--mute);pointer-events:none}
.mx-amount .mx-in{padding-inline-start:3rem}

.mx-file{position:relative;display:block;border:1.5px dashed var(--line-2);border-radius:var(--r);
  padding:1.125rem;cursor:pointer;background:var(--sand-2);transition:border-color var(--t)}
.mx-file:hover{border-color:var(--accent)}
.mx-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.mx-file__b{display:flex;align-items:center;gap:.75rem;color:var(--ink-2);font-size:.875rem}
.mx-file__b svg{color:var(--accent)}
.mx-file.is-set{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.mx-file.is-set .mx-file__b{color:var(--ink)}

/* appearance:none hace heredar el relleno lateral de la página: padding:0
   y min-* son obligatorios o el control deja de ser cuadrado. */
.mx-check input,.mx-radio input{appearance:none;-webkit-appearance:none;
  padding:0;margin:0;flex:none;box-sizing:border-box;
  background-repeat:no-repeat;background-position:center;cursor:pointer}
.mx-check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.875rem;color:var(--ink-2);cursor:pointer}
.mx-check input{inline-size:1.125rem;block-size:1.125rem;min-inline-size:1.125rem;min-block-size:1.125rem;
  border:1.5px solid var(--line-2);border-radius:0;background-color:var(--sand-2);margin-block-start:.1875rem;
  transition:background-color var(--t),border-color var(--t)}
.mx-check input:hover{border-color:var(--mute)}
.mx-check input:checked{background-color:var(--accent);border-color:var(--accent);
  background-size:.8125rem .8125rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='m9.6 16.2-4.2-4.2-1.4 1.4 5.6 5.6L20.6 8 19.2 6.6z'/%3E%3C/svg%3E")}
.mx-check a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.mx-radios{display:grid;gap:.5rem}
.mx-radio{display:flex;align-items:center;gap:.875rem;border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:.875rem 1rem;cursor:pointer;background:var(--sand-2);transition:border-color var(--t)}
.mx-radio input{inline-size:1rem;block-size:1rem;min-inline-size:1rem;min-block-size:1rem;
  border:1.5px solid var(--line-2);border-radius:50%;transition:border-color var(--t),background-image var(--t)}
.mx-radio:hover{border-color:var(--mute)}
.mx-radio input:checked{border-color:var(--accent);
  background-image:radial-gradient(circle at center,var(--accent) 0 42%,transparent 43%)}
.mx-radio:has(input:checked){border-color:var(--accent)}
.mx-radio b{font-size:.9375rem;font-weight:600}
.mx-radio span{display:block;font-size:.8125rem;color:var(--mute)}

.mx-net{display:flex;align-items:flex-start;gap:.875rem;padding:.9375rem 1rem;
  background:var(--accent-2);border:1px solid rgba(193,18,31,.2)}
.mx-net svg{color:var(--accent);flex:none;margin-top:.1rem}
.mx-net b{display:block;font-size:.9375rem;font-weight:600}
.mx-net > span > span{display:block;font-size:.8125rem;color:var(--ink-2);margin-top:.125rem}

.mx-hint{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.8125rem;color:var(--mute);line-height:1.5}
.mx-hint__n{font-family:var(--fs);flex:none;font-variant-numeric:tabular-nums}
[data-wallet-field].is-ok .mx-in{border-color:var(--ok)}
[data-wallet-field].is-ok .mx-hint__t{color:var(--ok)}
[data-wallet-field].is-warn .mx-in{border-color:var(--wait)}
[data-wallet-field].is-warn .mx-hint__t{color:var(--wait)}
[data-wallet-field].is-bad .mx-in{border-color:var(--bad)}
[data-wallet-field].is-bad .mx-hint__t,[data-wallet-field].is-bad .mx-hint__n{color:var(--bad)}
.mx-in--wallet{word-break:break-all}
small.is-bad{color:var(--bad)}

.mx-fieldset{border:0;padding:0;margin:0 0 2rem}
.mx-fieldset legend{padding:0;margin-bottom:1.125rem;font-family:var(--fs);font-size:.6875rem;
  letter-spacing:.06em;color:var(--accent);width:100%;border-bottom:1px solid var(--line);padding-bottom:.625rem}

/* ── Avisos ──────────────────────────────────────────────────── */
.mx-note{display:flex;align-items:flex-start;gap:.75rem;padding:.9375rem 1.125rem;margin-bottom:1.5rem;border-radius:var(--r);
  font-size:.9375rem;line-height:1.55;border:1.5px solid}
.mx-note svg{flex:none;margin-top:.15rem}
.mx-note--ok{background:var(--ok-bg);border-color:var(--ok);color:#0C5238}
.mx-note--ok svg{color:var(--ok)}
.mx-note--wait{background:var(--wait-bg);border-color:var(--wait);color:#734808}
.mx-note--wait svg{color:var(--wait)}
.mx-note--bad{background:var(--bad-bg);border-color:var(--bad);color:#8E0D17}
.mx-note--bad svg{color:var(--bad)}

.mx-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--r-pill);
  font-family:var(--fs);font-size:.6875rem;border:1px solid currentColor;line-height:1.5}
.mx-chip--ok{color:var(--ok)}
.mx-chip--wait{color:var(--wait)}
.mx-chip--bad{color:var(--bad)}

/* ── Acceso ──────────────────────────────────────────────────── */
.mx-auth{min-height:calc(100svh - var(--bar));display:grid;grid-template-columns:1fr}
.mx-auth__aside{display:none;position:relative;overflow:hidden;background:var(--accent);min-height:calc(100svh - var(--bar))}
/* Círculos concéntricos en el mismo ámbar, apenas más claros. */
.mx-auth__aside::before{content:"";position:absolute;inset:-30%;
  background:repeating-radial-gradient(circle at 30% 70%,
    rgba(255,255,255,.16) 0 2px,transparent 2px 86px)}
.mx-auth__quote{position:relative;z-index:2;margin-top:auto;padding:clamp(2rem,4vw,3rem);display:grid;gap:.875rem}
.mx-auth__quote p{font-family:var(--fd);font-size:clamp(1.375rem,2.2vw,1.875rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.2;color:var(--accent-ink);max-width:20ch}
.mx-auth__quote span{color:rgba(26,18,4,.72);font-size:.875rem;font-weight:600}
.mx-auth__main{display:flex;flex-direction:column;padding:2.5rem var(--gut) 3rem;min-height:calc(100svh - var(--bar))}
.mx-auth__box{width:100%;max-width:26rem;margin:auto}
.mx-auth__box h1{font-size:clamp(1.75rem,3.2vw,2.25rem);margin-bottom:.625rem}
.mx-auth__box > p{color:var(--ink-2);margin-bottom:1.75rem}
.mx-auth__alt{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.mx-auth__alt a{color:var(--accent);font-weight:600}
.mx-auth__box--wide{max-width:42rem}
.mx-cols{display:grid;gap:0 1.125rem}

/* ── Operaciones (cliente) ───────────────────────────────────── */
.mx-app{padding:clamp(2rem,4vw,3rem) 0 clamp(2rem,4vw,3rem);min-height:60svh}
.mx-app__head{display:grid;gap:.375rem;margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.mx-app__head h1{font-size:clamp(1.75rem,3.2vw,2.25rem)}
.mx-app__head p{color:var(--ink-2)}

.mx-stats{display:grid;gap:0;border:1px solid var(--line);background:var(--sand-2);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:2rem}
.mx-stat{padding:1.125rem 1.25rem;border-bottom:1px solid var(--line)}
.mx-stat:last-child{border-bottom:0}
.mx-stat__k{font-family:var(--fs);font-size:.6875rem;color:var(--mute);display:block;margin-bottom:.4375rem}
.mx-stat__v{font-size:1.375rem;font-weight:500}
.mx-stat__v small{font-size:.75rem;color:var(--mute);font-family:var(--fs);margin-inline-start:.375rem}

.mx-panes{display:grid;gap:1.5rem;align-items:start}
.mx-pane{background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mx-pane__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.mx-pane__h h2{font-size:1rem}
.mx-pane__b{padding:1.25rem}

.mx-quote{border:1px solid var(--line);background:var(--sand);border-radius:var(--r);
  padding:1.125rem 1.25rem;margin-bottom:1.25rem;display:grid;gap:.6875rem}
.mx-quote__r{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.9375rem}
.mx-quote__r span{color:var(--ink-2)}
.mx-quote__out{border-top:1px solid var(--line);padding-top:.8125rem}
.mx-quote__r:first-child.mx-quote__out{border-top:0;padding-top:0}
.mx-quote__out b{font-size:1.375rem;color:var(--accent)}
.mx-quote__src{font-size:.8125rem;color:var(--mute);line-height:1.6}

.mx-tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.mx-tbl th{text-align:start;font-family:var(--fs);font-size:.6875rem;font-weight:500;color:var(--mute);
  padding:.75rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.mx-tbl td{padding:.875rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.mx-tbl tr:last-child td{border-bottom:0}
.mx-tbl tbody tr:hover{background:var(--sand)}
.mx-tbl .n{white-space:nowrap}
.mx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.mx-empty{padding:2.75rem 1.5rem;text-align:center;color:var(--ink-2)}
.mx-empty svg{color:var(--mute);margin:0 auto 1rem}

.mx-otp{display:flex;gap:.5rem;justify-content:center;margin:1.5rem 0}
.mx-otp input{width:3rem;height:3.75rem;padding:0;text-align:center;background:var(--sand-2);color:var(--ink);border-radius:var(--r);
  border:1.5px solid var(--line-2);border-radius:var(--r);font-size:1.375rem;transition:border-color var(--t)}
.mx-otp input:focus{outline:none;border-color:var(--accent)}
.mx-otp input.is-set{border-color:var(--ink)}

.mx-testbar{display:flex;align-items:flex-start;gap:.875rem;padding:1rem;margin-bottom:1.5rem;
  border:1.5px solid var(--wait);background:var(--wait-bg)}
.mx-testbar svg{color:var(--wait);flex:none;margin-top:.15rem}
.mx-testbar b{display:block;color:var(--accent);font-size:.875rem}
.mx-testbar span{display:block;color:var(--ink-2);font-size:.8125rem;margin:.25rem 0 .625rem}
.mx-testbar code{display:inline-block;font:500 1.375rem/1 var(--fs);letter-spacing:.26em;
  background:var(--sand-2);border:1px solid var(--line-2);padding:.5rem .75rem}

/* ── Aprobaciones ────────────────────────────────────────────── */
.mx-tabs{display:flex;gap:0;margin-bottom:1.5rem;overflow-x:auto;border:1px solid var(--line);background:var(--sand-2);border-radius:var(--r-pill);padding:.25rem}
.mx-tab{flex:1 0 auto;padding:.6875rem 1rem;background:transparent;border:0;border-radius:var(--r-pill);
  cursor:pointer;font-family:var(--fs);font-size:.75rem;color:var(--ink-2);
  display:flex;align-items:center;gap:.5rem;transition:background var(--t),color var(--t);white-space:nowrap}
.mx-tab:hover{background:var(--sand-3)}
.mx-tab.is-on{background:var(--accent);color:var(--accent-ink)}
.mx-tab b{font-size:.6875rem;opacity:.7}

.mx-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.mx-search{position:relative;flex:1 1 15rem}
.mx-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.mx-search input{padding-inline-start:2.75rem}

.mx-drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(42rem,100%);z-index:130;
  background:var(--sand);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .3s var(--ease);overflow:hidden}
.mx-drawer.is-on{transform:none}
.mx-drawer__h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.25rem;border-bottom:1px solid var(--line);flex:none;background:var(--sand-2)}
.mx-drawer__b{flex:1;overflow-y:auto;padding:1.25rem}
.mx-drawer__f{padding:1rem 1.25rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.625rem;flex:none;background:var(--sand-2)}
.mx-scrim{position:fixed;inset:0;z-index:125;background:rgba(18,22,28,.4);opacity:0;pointer-events:none;transition:opacity var(--t)}
.mx-scrim.is-on{opacity:1;pointer-events:auto}

.mx-block{margin-bottom:1.75rem}
.mx-block > h3{font-family:var(--fs);font-size:.6875rem;letter-spacing:.06em;color:var(--accent);
  margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}

.mx-decision{display:flex;align-items:flex-start;gap:.875rem;padding:.9375rem 1.125rem;margin-bottom:1.5rem;
  font-size:.9375rem;border:1.5px solid var(--line-2);background:var(--sand-2)}
.mx-decision svg{flex:none;margin-top:.1rem}
.mx-decision b{display:block;font-weight:600}
.mx-decision > span > span{display:block;color:var(--mute);font-size:.8125rem;margin-top:.125rem}
.mx-decision--ok{border-color:var(--ok);background:var(--ok-bg)}
.mx-decision--ok svg{color:var(--ok)}
.mx-decision--bad{border-color:var(--bad);background:var(--bad-bg)}
.mx-decision--bad svg{color:var(--bad)}
.mx-decision--wait{border-color:var(--wait);background:var(--wait-bg)}
.mx-decision--wait svg{color:var(--wait)}

.mx-docs{display:grid;gap:.5rem;grid-template-columns:1fr}
.mx-doc{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border:1px solid var(--line-2);
  background:var(--sand-2);transition:border-color var(--t)}
.mx-doc:hover{border-color:var(--accent)}
.mx-doc svg{color:var(--accent);flex:none}
.mx-doc b{display:block;font-size:.875rem;font-weight:600}
.mx-doc span{font-size:.75rem;color:var(--mute)}

.mx-qa{display:grid;gap:0;border-top:1px solid var(--line)}
.mx-qa > div{display:grid;gap:.1875rem;padding:.8125rem 0;border-bottom:1px solid var(--line)}
.mx-qa dt{font-size:.8125rem;color:var(--mute)}
.mx-qa dd{margin:0;font-size:.9375rem}

.mx-log{display:grid;gap:0;font-size:.8125rem}
.mx-log > div{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.5625rem 0;border-bottom:1px solid var(--line)}
.mx-log time{font-family:var(--fs);color:var(--mute);white-space:nowrap}
.mx-log em{font-style:normal;font-weight:600}

.mx-spin{width:1.125rem;height:1.125rem;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:mx-rot .7s linear infinite;flex:none}
@keyframes mx-rot{to{transform:rotate(360deg)}}
.mx-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:2.5rem;color:var(--ink-2)}

.mx-dlg{width:min(28rem,calc(100vw - 2rem));padding:clamp(1.5rem,4vw,2rem);
  background:var(--sand-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r)}
.mx-dlg::backdrop{background:rgba(18,22,28,.5)}
.mx-dlg[open]{animation:mx-pop .18s var(--ease)}
@keyframes mx-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mx-dlg__d{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:1.5rem}
.mx-dlg__d > div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.mx-dlg__d dt{color:var(--ink-2);font-size:.875rem}
.mx-dlg__d dd{margin:0;font-weight:600;font-size:.9375rem;text-align:end}
.mx-dlg__d dd.n{font-family:var(--fs);font-weight:400;font-size:.8125rem}
.mx-dlg__f{display:flex;gap:.625rem;flex-wrap:wrap}
.mx-dlg__f .mx-btn{flex:1 1 8rem}

/* ── Contacto ────────────────────────────────────────────────── */
.mx-contact{display:grid;gap:2.5rem}
.mx-contact__aside{display:grid;gap:1.25rem;align-content:start}
.mx-contact__i{display:grid;grid-template-columns:auto 1fr;gap:.875rem}
.mx-contact__i svg{color:var(--accent);margin-top:.25rem}
.mx-contact__i b{display:block;font-family:var(--fs);font-size:.6875rem;color:var(--mute);margin-bottom:.125rem}
.mx-contact__i span,.mx-contact__i a{font-size:.9375rem}
.mx-contact__i a:hover{color:var(--accent)}
.mx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Legales ─────────────────────────────────────────────────── */
.mx-legal{padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(3.5rem,7vw,5rem)}
.mx-legal__in{max-width:80rem}
.mx-legal h1{font-size:clamp(1.875rem,4vw,2.75rem);margin-bottom:.875rem}
.mx-legal__meta{color:var(--mute);font-family:var(--fs);font-size:.75rem;margin-bottom:2.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.mx-legal__in h2{font-size:1.25rem;margin:2.5rem 0 .75rem}
.mx-legal__in h3{font-size:1.0625rem;margin:1.75rem 0 .5rem}
.mx-legal__in p,.mx-legal__in li{color:var(--ink-2);font-size:.9375rem;line-height:1.8;margin-bottom:.875rem}
.mx-legal__in ul{list-style:none;display:grid;gap:.5rem;margin-bottom:1.5rem}
.mx-legal__in ul li{padding-inline-start:1.25rem;position:relative;margin-bottom:0}
.mx-legal__in ul li::before{content:"";position:absolute;left:0;top:.75rem;width:.5rem;height:1.5px;background:var(--accent)}
.mx-legal__in strong{color:var(--ink)}

/* ── Pie ─────────────────────────────────────────────────────── */
.mx-foot{border-top:1px solid var(--line);background:var(--sand-2);border-radius:var(--r-lg) var(--r-lg) 0 0}
.mx-foot__top{max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,5vw,3.5rem) var(--gut);display:grid;gap:2rem}
.mx-foot__brand p{color:var(--ink-2);font-size:.9375rem;max-width:34ch;margin:.875rem 0 1.25rem}
.mx-foot__col h3{font-family:var(--fs);font-size:.6875rem;letter-spacing:.06em;color:var(--mute);margin-bottom:.875rem}
.mx-foot__col ul{display:grid;gap:.5rem;font-size:.9375rem;color:var(--ink-2)}
.mx-foot__col a:hover{color:var(--accent)}
.mx-foot address{display:grid;gap:.5rem;font-size:.9375rem;color:var(--ink-2);max-width:30ch}
.mx-foot__hours{color:var(--mute);font-size:.875rem}
.mx-foot__bar{border-top:1px solid var(--line);padding:1.125rem var(--gut);max-width:var(--wrap);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;color:var(--mute);font-size:.8125rem}

/* ═══ Puntos de quiebre ═══════════════════════════════════════ */
@media (min-width:600px){
  .mx-cols{grid-template-columns:1fr 1fr}
  .mx-grid{grid-template-columns:repeat(2,1fr)}
  .mx-docs{grid-template-columns:repeat(2,1fr)}
  .mx-foot__top{grid-template-columns:repeat(2,1fr)}
  .mx-stats{grid-template-columns:repeat(3,1fr)}
  .mx-stat{border-bottom:0;border-inline-end:1px solid var(--line)}
  .mx-stat:last-child{border-inline-end:0}
}
@media (min-width:900px){
  .mx-lang{display:flex}
  .mx-grid{grid-template-columns:repeat(3,1fr)}
  .mx-steps{grid-template-columns:repeat(2,1fr)}
  .mx-split{grid-template-columns:1.15fr .85fr}
  .mx-hero__grid{grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
  .mx-line__i{flex-basis:20rem}
  .mx-contact{grid-template-columns:.75fr 1.25fr}
  .mx-panes{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .mx-foot__top{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .mx-auth{grid-template-columns:1fr 1fr}
  .mx-auth__aside{display:flex;flex-direction:column}
}
@media (min-width:1060px){
  .mx-nav{display:flex}
  .mx-burger{display:none}
}
@media (max-width:719px){
  .mx-top__act > .mx-btn{display:none}
}

/* ── Checkout ────────────────────────────────────────────────── */
.mx-steps-bar{display:flex;gap:0;margin:0 0 1.75rem;padding:0;list-style:none;border:1px solid var(--line)}
.mx-steps-bar li{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem .875rem;font-family:var(--fs);font-size:.6875rem;color:var(--mute);
  border-inline-end:1px solid var(--line);white-space:nowrap}
.mx-steps-bar li:last-child{border-inline-end:0}
.mx-steps-bar li.is-done{color:var(--ink-2)}
.mx-steps-bar li.is-now{background:var(--accent);color:#fff}

.woocommerce form .form-row label{font-size:.875rem;font-weight:600;margin-bottom:.375rem;display:block}
.woocommerce form .form-row .required{color:var(--accent);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{background:var(--sand-2);color:var(--ink);border:1.5px solid var(--line-2);
  border-radius:var(--r);padding:.8125rem 1rem;font:400 .9375rem/1.4 var(--fs)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--accent)}
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--sand-2);border:1.5px solid var(--line-2);border-radius:var(--r);height:auto;padding:.6875rem 1rem}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:1.4;padding:0}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:12px}
.select2-dropdown{background:var(--sand-2);border:1.5px solid var(--line-2);border-radius:var(--r);color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--accent);color:#fff}
.woocommerce table.shop_table{border:1px solid var(--line);background:var(--sand-2);border-radius:var(--r-pill);padding:.25rem}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line);color:var(--ink)}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{
  background:var(--accent)!important;color:#fff!important;border-radius:var(--r)!important;font-weight:600!important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  border-top-color:var(--accent)!important;background:var(--sand-2)!important;color:var(--ink)!important;border-radius:var(--r)!important}
.woocommerce-checkout #payment{background:var(--sand-2);border:1px solid var(--line)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
/* La pasarela pinta su formulario en blanco desde su iframe: se enmarca. */
.woocommerce-checkout #payment div.payment_box.payment_method_keycop_gateway{
  border:1px solid var(--line-2)!important;border-radius:var(--r)!important;padding:1rem!important;margin-top:.75rem!important}
.woocommerce-checkout #payment div.payment_box.payment_method_keycop_gateway::before{display:none!important}
.woocommerce .cart-collaterals{display:flow-root}
@media (min-width:1000px){
/* Bricks marca el formulario como .brxe-container y lo pone en columna:
     hay que declarar la dirección o las dos columnas se apilan. */
  .mx-woo form.checkout{display:flex;flex-direction:row;flex-wrap:nowrap;gap:2.5rem;align-items:flex-start}
  .mx-woo #customer_details{flex:1 1 auto;min-width:0}
  .mx-woo #order_review{flex:0 0 21rem;width:21rem}
  .mx-woo #order_review_heading{display:none}
}

/* ── Panel de estado del hero ─────────────────────────────────
   Responde con datos lo que se pregunta quien llega: a qué precio,
   cuánto cobran y cuándo llega su USDT. Nada decorativo. */
.mx-live{background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,1.75rem);display:grid;gap:1.25rem;align-content:start}

.mx-live__top{display:grid;grid-template-columns:auto 1fr;gap:.375rem .625rem;align-items:center}
.mx-live__top b{font-size:.9375rem;font-weight:700}
.mx-live__top span:last-child{grid-column:2;font-size:.8125rem;color:var(--mute)}
.mx-live__dot.is-on{background:var(--accent);animation:mx-late 2.4s var(--ease) infinite}
@keyframes mx-late{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.mx-live__dot.is-on{animation:none}}

.mx-live__rate{display:grid;gap:.25rem;padding-block:1.125rem;
  border-block:1px solid var(--line)}
.mx-live__k{font-size:.75rem;color:var(--mute);font-weight:600}
.mx-live__rate b{font-size:clamp(2rem,4.5vw,2.75rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.05;color:var(--accent);
  font-variant-numeric:tabular-nums lining-nums}
.mx-live__rate b small{font-size:.875rem;font-weight:600;color:var(--ink-2);margin-inline-start:.375rem;
  letter-spacing:0}
.mx-live__age{font-size:.8125rem;color:var(--mute)}

.mx-live__rows{display:grid;gap:.6875rem;margin:0}
.mx-live__rows > div{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem}
.mx-live__rows dt{color:var(--ink-2)}
.mx-live__rows dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.mx-live__rows dd.is-good{color:var(--accent)}

.mx-live__eta{display:grid;grid-template-columns:auto 1fr;gap:.625rem;align-items:start;
  padding-top:1.125rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-2)}
.mx-live__eta svg{color:var(--accent);margin-top:.125rem}

/* ── Mi acceso: línea de tiempo ────────────────────────────────
   El formulario es el primer hito de la ruta; los dos siguientes quedan
   a la vista, apagados. Sin panel lateral ni caja centrada: ninguna casa
   del grupo repite maqueta de acceso. */
.mx-acceso{min-height:100svh;
  padding-block:calc(var(--bar) + clamp(2.5rem,6vw,4rem)) clamp(3rem,6vw,4.5rem)}
.mx-acceso__cab{max-width:46ch}
.mx-acceso__t > span{display:block}
.mx-acceso__t{margin-top:.875rem;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em;line-height:1.05}

.mx-ruta{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;list-style:none;
  display:grid;gap:0;max-width:44rem}
.mx-ruta__h{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 clamp(1.25rem,3vw,2rem);position:relative;padding-bottom:clamp(2rem,4vw,2.75rem)}
.mx-ruta__h:last-child{padding-bottom:0}
/* El hilo que une los hitos, dibujado desde el punto hacia abajo. */
.mx-ruta__h:not(:last-child)::before{content:"";position:absolute;
  inset-block:1.75rem 0;inset-inline-start:.5625rem;width:1px;background:var(--line-2)}
.mx-ruta__n{inline-size:1.125rem;block-size:1.125rem;margin-block-start:.375rem;
  border-radius:0;border:1px solid var(--line-2);background:var(--sand)}
.is-now .mx-ruta__n{background:var(--accent);border-color:var(--accent)}
.mx-ruta__c h2{font-size:clamp(1.125rem,2vw,1.375rem);letter-spacing:-.02em}
.mx-ruta__c p{margin-top:.4375rem;color:var(--ink-2);font-size:.9375rem;line-height:1.6;max-width:52ch}
.mx-ruta__h:not(.is-now) .mx-ruta__c h2{color:var(--ink-2)}
.mx-ruta__h:not(.is-now) .mx-ruta__c p{color:var(--mute)}

.mx-acceso__f{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.mx-acceso__fila{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  justify-content:space-between;margin-bottom:1.5rem}
.mx-acceso__olvido{font-size:.875rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px}
.mx-acceso__olvido:hover{color:var(--ink)}
.mx-acceso__alt{margin-top:1.25rem;font-size:.9375rem;color:var(--ink-2)}
.mx-acceso__alt a{color:var(--accent);font-weight:600}

/* Alta: cabecera propia. */
.mx-alta{padding-block:calc(var(--bar) + clamp(2.5rem,6vw,4rem)) clamp(3rem,6vw,4.5rem)}
.mx-alta__t{margin-top:.875rem;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em;line-height:1.05}
.mx-alta__t > span{display:block}
.mx-alta__d{margin-block:1rem clamp(2rem,4vw,3rem);max-width:56ch;color:var(--ink-2);line-height:1.6}
.mx-alta form,.mx-alta .mx-auth__alt{max-width:44rem}


/* ── Controles homologados ─────────────────────────────────────
   Campo, selector y boton de formulario miden lo mismo y alinean por
   arriba y por abajo. Sin esto, un boton de 62 px junto a un campo de
   50 sobresale 12 px y se ve mal construido. */
.mx-in,.mx-sel{block-size:var(--ctrl);padding-block:0}
.mx-ta{block-size:auto}
form .mx-btn{block-size:var(--ctrl);padding-block:0}

/* ── Fachada fotográfica de las pantallas de cuenta ────────────
   Ninguna pantalla de cuenta es un formulario sobre fondo plano: la
   cabecera se convierte en banda a todo lo ancho sobre la fotografía de la
   casa —una toma larga, que es la misma idea que la línea de tiempo de
   abajo— con su velo. Una sola imagen sirve a las cuatro pantallas. */
.mx-acceso,.mx-alta{padding-block-start:0}
.mx-acceso__cab,.mx-alta__cab{position:relative;overflow:hidden;max-width:none;
  padding:calc(var(--bar) + clamp(2.5rem,6vw,4rem)) var(--gut) clamp(2.5rem,5vw,3.5rem);
  margin-block-end:clamp(2rem,4vw,3rem);border-block-end:1px solid var(--line)}
.mx-acceso__cab-in,.mx-alta__cab-in{position:relative;z-index:2;
  max-width:var(--wrap);margin-inline:auto}
.mx-acceso__cab-in > *{max-width:46ch}
.mx-alta__cab-in > *{max-width:56ch}
.mx-banda__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 48%}
.mx-banda__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,16,36,.94) 0%,rgba(20,16,36,.90) 50%,
                             rgba(20,16,36,.80) 74%,rgba(20,16,36,.34) 100%)}
.mx-alta__cab-in .mx-alta__d{margin-block-end:0}
.mx-acceso .mx-wrap > :first-child,.mx-alta .mx-wrap > :first-child{margin-block-start:0}

/* El interior de la banda repite el wrap exacto para que el titular arranque
   en la misma x que el formulario de abajo. */
.mx-acceso__cab,.mx-alta__cab{padding-inline:0}
.mx-acceso__cab-in,.mx-alta__cab-in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* La toma es nocturna y el velo violeta la borraba entera. Se aclara la
   foto y el velo guarda su fuerza sólo hasta donde termina el titular
   —46ch—, soltándose después para que se vean las estelas, que son la
   misma idea que la línea de tiempo de abajo. */
.mx-banda__img{filter:brightness(1.62) contrast(.9)}
.mx-banda__velo{background:linear-gradient(90deg,rgba(20,16,36,.90) 0%,rgba(20,16,36,.84) 46%,
                                           rgba(20,16,36,.56) 72%,rgba(20,16,36,.16) 100%)}

/* 1.62 de brillo quemaba la toma y la volvía una vista diurna de una playa
   de vías: se pierde lo único que importaba, las estelas. Se baja a 1.24 y
   el recorte pasa a la mitad de abajo, donde está la curva de luz. */
.mx-banda__img{filter:brightness(1.24) contrast(.96);object-position:50% 58%}
.mx-banda__velo{background:linear-gradient(90deg,rgba(20,16,36,.88) 0%,rgba(20,16,36,.82) 46%,
                                           rgba(20,16,36,.54) 72%,rgba(20,16,36,.18) 100%)}

/* ── El alta como LÍNEA DE TIEMPO ──────────────────────────────
   Moodrex cuenta el acceso como una ruta de hitos; el alta se lee igual y
   dice cuánto cuesta cada tramo, que es la duda real de quien se registra.
   El riel de la ruta ocupa el costado izquierdo, así que el formulario usa
   el ancho completo y no queda columna vacía a la derecha. */
.mx-ruta--alta{margin-top:0}
.mx-ruta--alta .mx-ruta__c{padding-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.mx-ruta--alta .mx-fieldset{border:0;padding:0;margin:0}
.mx-ruta--alta legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .875rem;
  padding:0;margin-bottom:1.25rem;inline-size:100%}
.mx-hito__t{font-family:var(--fd);font-weight:700;font-size:clamp(1.125rem,2vw,1.375rem);
  letter-spacing:-.02em;color:var(--ink)}
.mx-hito__m{font-size:.8125rem;color:var(--accent);
  border:1px solid var(--line);border-radius:0;padding:.25rem .625rem}
.mx-alta form{max-width:none}
.mx-alta .mx-check,.mx-alta form > .mx-btn,.mx-alta form > p{max-width:44rem}

/* La ruta del acceso vive en una medida de 704 px; la del alta lleva
   formulario y necesita el ancho entero, o queda un costado en blanco. El
   cierre —condiciones y boton— se alinea con el contenido de los hitos, no
   con el borde del wrap, para que la columna se lea como una sola. */
.mx-ruta--alta{max-width:none;--riel:50px}
.mx-alta form > .mx-check,
.mx-alta form > .mx-btn,
.mx-alta form > p{margin-inline-start:50px}
.mx-alta form > .mx-btn{inline-size:calc(100% - 50px)}
/* El boton cierra la columna de lado a lado: un boton a media caja deja el
   costado en blanco y la seccion parece a medio cargar. */
.mx-alta form > .mx-btn,.mx-alta form > p{max-width:none}

/* El rótulo del hito es sólo el titular: sin píldora al lado, que no
   alineaba con la línea base y prometía un tiempo que no se sostiene. */
.mx-ruta--alta legend{display:block;margin-bottom:1.25rem;padding-bottom:.875rem;
  border-bottom:1px solid var(--line)}
.mx-hito__t{display:block}

/* El cierre del alta se alinea con el contenido de los hitos usando el mismo
   calculo del riel —punto + canal—, no un margen fijo: con 50 px duros el
   boton quedaba 12 px corrido en pantalla angosta. */
.mx-ruta--alta{--riel:calc(18px + clamp(1.25rem,3vw,2rem))}
.mx-alta form > .mx-check,
.mx-alta form > .mx-btn,
.mx-alta form > p{margin-inline-start:var(--riel, 50px)}
.mx-alta form > .mx-btn{inline-size:auto}

/* ── Marcas de aceptación de pago ──────────────────────────────
   Logotipos reales. Cada casa las presenta a su manera; lo que no
   cambia es la marca. */
/* Fondo violeta: el azul de Visa no sobrevive ahí, así que cada marca va a
   color sobre su propia tarjeta blanca, con el radio 14 de esta casa. */
.mx-pays{display:flex;gap:.625rem}
.mx-pays__c{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--r);padding:.5rem .75rem;min-inline-size:3.75rem}
.mx-pay--visa{inline-size:2.75rem;block-size:.875rem}
.mx-pay--mc{inline-size:1.625rem;block-size:1.0625rem}

/* ── El comprobante del héroe ──────────────────────────────────
   Sustituye al panel de estado, que era la misma pieza que publica la casa
   hermana: píldora, titular, bajada, dos botones y un recuadro con el
   precio de mercado. Aquí no hay recuadro: filas con filete y una sola
   cifra a cuerpo de display, que es la que promete el titular. */
.mx-recibo{margin:0;align-self:center}
.mx-recibo__cab b{display:block;font-family:var(--fd);font-weight:700;
  font-size:1.0625rem;letter-spacing:-.015em}
.mx-recibo__cab span{display:block;margin-top:.375rem;font-size:.875rem;color:var(--ink-2)}
.mx-recibo__l{margin:1.5rem 0 0;display:grid}
.mx-recibo__l > div{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.5rem 1.25rem;
  padding-block:.875rem;border-block-start:1px solid var(--line)}
.mx-recibo__l dt{font-size:.9375rem;color:var(--ink-2)}
.mx-recibo__l dd{margin:0;font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;text-align:end}
.mx-recibo__eje{padding-block:1.125rem}
.mx-recibo__eje dt{color:var(--ink)}
.mx-recibo__eje dd{font-family:var(--fd);font-weight:700;
  font-size:clamp(2rem,4.4vw,2.75rem);letter-spacing:-.03em;color:var(--accent);line-height:1}
.mx-recibo__eje dd small{margin-inline-start:.4375rem;font-family:var(--ft, inherit);
  font-size:.9375rem;font-weight:400;color:var(--ink-2);letter-spacing:0}
.mx-recibo__pie{margin-top:1.125rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--ink-2);line-height:1.55}

/* La cabecera del comprobante heredaba el centrado y el color apagado de la
   figura: se alinea con las filas y recupera la tinta. */
.mx-recibo,.mx-recibo__cab{text-align:start}
.mx-recibo__cab b{color:var(--ink)}

/* ── Esquina recta ─────────────────────────────────────────────
   Los tokens ya están en cero; esto cubre lo que el navegador redondea por
   su cuenta y deja constancia de las dos excepciones deliberadas. */
.mx-in,.mx-sel,.mx-ta,.mx-btn,.mx-card,.mx-slab,.mx-file__b{border-radius:0}
.mx-radio input{border-radius:50%}   /* afordancia: redondo = una sola opción */
.mx-spin{border-radius:50%}          /* gira: tiene que ser un círculo */

/* ── Ritmo vertical de una pantalla de cuenta ──────────────────
   Antes el aire de arriba lo ponía el margen inferior de la banda y el de
   abajo el relleno de la sección, cada uno con su propio valor: el bloque
   quedaba con 44-48 px arriba y hasta 177 abajo, y se veía descentrado. Los dos
   salen ahora del mismo token, así que coinciden por construcción. */
:root{ --aire:clamp(3rem,6vw,4.5rem); }
.mx-acceso__cab,.mx-alta__cab{margin-block-end:var(--aire)}
.mx-acceso,.mx-alta{padding-block-end:var(--aire)}

/* ── pulido responsivo: --- pulido responsivo --- ──────────────
   El copyright del pie es un <small> sin regla propia: hereda el 0.8em
   del navegador y cae a 10.4 px dentro de una barra de 13. No era un
   valor mal elegido, era un valor que nadie eligió. */
.mx-foot__bar small{font-size:inherit}

@media (max-width:767px){
  /* Blancos de toque a 44 px SIN mover la maqueta: la superficie la pone
     un pseudo-elemento centrado, no el relleno. Medido antes: entre 15 y
     38 px, con el mínimo exigible en 24. */
  .mx-logo,.mx-burger,.mx-acceso__olvido{position:relative}
  .mx-logo::after,.mx-burger::after,.mx-acceso__olvido::after{content:"";position:absolute;top:50%;left:50%;
    translate:-50% -50%;inline-size:max(100%,2.75rem);block-size:2.75rem}
}

/* ── toque en listas: --- toque en listas --- ──────────────────
   Los enlaces del pie medían de 16 a 21 px y el conmutador de idioma se
   quedaba por debajo de 24 aunque tuviera superposición: entre vecinos
   pegados los recuadros se solapan y el de la derecha roba el toque. Aquí
   la separación de la lista se convierte en relleno del propio enlace, así
   que el blanco crece y el pie mide lo mismo. */
@media (max-width:767px){
  .mx-foot__col ul{gap:0}
  .mx-foot__col ul a{display:inline-block;padding-block:.375rem}
  .mx-foot address a,.mx-foot__bar a{display:inline-block;padding-block:.3125rem}
  .mx-lang{gap:0}
  /* Sin tocar el display: alguno es inline-flex con bandera, y
     forzarlo a inline-block descolocaba el icono. */
  .mx-lang a{padding:.5rem .625rem}
}

/* Una paridad no envejece: el sello «Precio de hace N min» era información
   de una tasa que se movía, y ya no se mueve. */
[data-quote-age]{display:none}


/* ══ Identificación · una cinta de dos tramos ═════════════════════════
   Moodrex mide todo por lo rápido que se llega al final, así que las dos
   caras son dos tramos de una misma cinta que se va llenando. Los dos
   están siempre a la vista y siempre se pueden pulsar. */
.mx-cinta{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line-2);border:1px solid var(--line-2);margin-bottom:.75rem}
@media (max-width:560px){.mx-cinta{grid-template-columns:1fr}}
.mx-cinta__t{position:relative;display:flex;align-items:center;gap:.875rem;
  padding:1rem 1.125rem;background:var(--sand);cursor:pointer;transition:background .2s}
.mx-cinta__t:hover{background:var(--sand-2)}
.mx-cinta__t input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.mx-cinta__art{color:var(--accent);line-height:0;flex:none}
.mx-cinta__pv{display:none;width:3.75rem;aspect-ratio:1.586;object-fit:cover;flex:none;
  border:1px solid var(--line-2)}
.mx-cinta__c{min-width:0}
.mx-cinta__l{font-size:.875rem;font-weight:600;color:var(--ink)}
.mx-cinta__s{font-size:.8125rem;color:var(--mute);overflow-wrap:anywhere}
.mx-cinta__t.is-set{background:var(--sand-2)}
.mx-cinta__t.is-set .mx-cinta__art{display:none}
.mx-cinta__t.is-set .mx-cinta__pv{display:block}
.mx-cinta__t.is-set.is-pdf .mx-cinta__art{display:block}
.mx-cinta__t.is-set.is-pdf .mx-cinta__pv{display:none}
.mx-cinta__t.is-set .mx-cinta__s{color:var(--ok)}
.mx-cinta__t.is-bad .mx-cinta__s{color:var(--bad)}
.mx-barra{grid-column:1/-1;display:flex;gap:2px;height:3px;margin-bottom:1.25rem}
.mx-barra span{flex:1;background:var(--line-2);transition:background .3s}
.mx-barra span.is-on{background:var(--ok)}
.mx-cinta__say{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;font-size:.8125rem;
  color:var(--mute);margin:-.75rem 0 1.25rem;min-height:1.25rem}
.mx-cinta__say.is-ok{color:var(--ok)}
.mx-cinta__say.is-bad{color:var(--bad)}