/* Hocico Phone — Mi Hocico · Checkout por pasos (MhfStepper). Hereda tokens .mh */

.mst-back{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px;
  background:rgba(4,19,13,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:mstfade .18s ease; }
@keyframes mstfade{ from{ opacity:0; } to{ opacity:1; } }
.mst-modal{ width:min(460px,100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--mh-bg,#0c1813); border:1px solid rgba(var(--sg),.2); border-radius:22px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7); animation:mstpop .22s cubic-bezier(.4,0,.2,1); }
.mh.light .mst-modal{ background:#fff; }
@keyframes mstpop{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

/* cabecera + progreso */
.mst-head{ padding:20px 22px 16px; border-bottom:1px solid rgba(var(--sg),.12); }
.mst-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mst-title{ font-size:18px; font-weight:800; color:var(--strong); letter-spacing:-.02em; }
.mst-x{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; cursor:pointer;
  background:rgba(var(--sg),.08); border:1px solid rgba(var(--sg),.16); color:rgba(var(--tx),.65); }
.mst-x:hover{ color:var(--strong); }
.mst-prog-meta{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-t); margin:14px 0 7px; }
.mst-prog{ height:6px; border-radius:999px; background:rgba(var(--sg),.14); overflow:hidden; }
.mst-prog-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#37E6A4,#37E6A4cc); transition:width .4s cubic-bezier(.4,0,.2,1); }

/* cuerpo */
.mst-body{ padding:20px 22px; overflow-y:auto; }
.mst-lead{ font-size:13.5px; line-height:1.55; color:rgba(var(--tx),.7); margin:0 0 16px; }
.mst-lead b{ color:var(--strong); font-weight:700; }
.mst-step{ animation:mststep .2s ease; }
@keyframes mststep{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:none; } }

/* campos */
.mst-field{ display:block; margin-bottom:14px; }
.mst-flabel{ display:block; font-size:12px; font-weight:700; color:rgba(var(--tx),.65); margin-bottom:6px; }
.mst-input{ width:100%; box-sizing:border-box; padding:12px 13px; border-radius:11px; font-family:inherit; font-size:14px;
  color:var(--strong); background:rgba(var(--sg),.06); border:1px solid rgba(var(--sg),.18); transition:border-color .14s, background .14s; }
.mst-input:focus{ outline:none; border-color:#37E6A4; background:rgba(55,230,164,.05); }
.mh.light .mst-input{ background:#f6f9f7; }
.mst-input option{ color:#0b1813; }
.mst-fhint{ display:block; font-size:11.5px; color:rgba(var(--tx),.5); margin-top:6px; }
.mst-row2{ display:grid; grid-template-columns:1fr 1.3fr; gap:12px; }

/* radios */
.mst-radio{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.mst-radio-b{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:13px 15px; border-radius:13px;
  background:rgba(var(--sg),.05); border:1.5px solid rgba(var(--sg),.18); cursor:pointer; font-family:inherit; transition:all .14s; }
.mst-radio-b:hover{ border-color:rgba(55,230,164,.4); }
.mst-radio-b.on{ border-color:#37E6A4; background:rgba(55,230,164,.07); }
.mst-radio-dot{ flex:none; width:18px; height:18px; border-radius:50%; border:2px solid rgba(var(--sg),.4); display:grid; place-items:center; }
.mst-radio-b.on .mst-radio-dot{ border-color:#37E6A4; }
.mst-radio-dot span{ width:9px; height:9px; border-radius:50%; background:#37E6A4; }
.mst-radio-t{ display:block; font-size:14px; font-weight:700; color:var(--strong); }
.mst-radio-s{ display:block; font-size:12px; color:rgba(var(--tx),.55); margin-top:1px; }

/* feats / permanencia / checkbox */
.mst-feats{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.mst-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:rgba(var(--tx),.82); line-height:1.4; }
.mst-feats svg{ flex:none; margin-top:2px; }
.mst-perm{ display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border-radius:13px; margin-bottom:14px;
  background:rgba(55,230,164,.07); border:1px solid rgba(55,230,164,.2); color:rgba(var(--tx),.8); font-size:12.5px; line-height:1.5; }
.mst-perm.warn{ background:rgba(255,181,159,.09); border-color:rgba(255,181,159,.26); }
.mst-perm svg{ flex:none; margin-top:1px; }
.mst-perm b{ color:var(--strong); }
.mst-check{ display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(var(--tx),.8); cursor:pointer; }
.mst-check-box{ flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid rgba(var(--sg),.35); display:grid; place-items:center; transition:all .14s; }
.mst-check-box.on{ background:#37E6A4; border-color:#37E6A4; }

/* cobertura (fibra) */
.mst-cov{ display:flex; align-items:center; gap:9px; font-size:13px; padding:11px 13px; border-radius:11px; color:rgba(var(--tx),.7);
  background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.16); }
.mst-cov.ok{ color:#37E6A4; background:rgba(55,230,164,.08); border-color:rgba(55,230,164,.24); }
.mst-ghost{ display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:11px; cursor:pointer;
  background:transparent; border:1px solid rgba(var(--sg),.24); color:var(--strong); font-family:inherit; font-size:13.5px; font-weight:700; transition:all .14s; }
.mst-ghost:hover:not(:disabled){ border-color:#37E6A4; }
.mst-ghost:disabled{ opacity:.5; cursor:default; }

/* bonos */
.mst-bundles{ display:flex; flex-direction:column; gap:9px; }
.mst-bundle{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 16px; border-radius:13px;
  border:1.5px solid rgba(var(--sg),.18); background:rgba(var(--sg),.05); cursor:pointer; font-family:inherit; text-align:left; transition:all .14s; }
.mst-bundle:hover{ border-color:rgba(55,230,164,.4); }
.mst-bundle.on{ border-color:#37E6A4; background:rgba(55,230,164,.08); }
.mst-bundle-l{ display:flex; flex-direction:column; gap:2px; }
.mst-bundle-gb{ font-size:15px; font-weight:700; color:var(--strong); }
.mst-bundle-sub{ font-size:11.5px; color:rgba(var(--tx),.55); }
.mst-bundle-price{ font-size:17px; font-weight:800; color:#37E6A4; }

/* paso de pago */
.mst-pay{ border-radius:14px; border:1px solid rgba(var(--sg),.18); background:rgba(var(--sg),.05); padding:16px; }
.mst-pay-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px; font-weight:700; color:var(--strong); }
.mst-pay-amt{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
.mst-pay-note{ font-size:12px; color:rgba(var(--tx),.55); margin-top:4px; }
.mst-stripe{ display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(var(--sg),.14);
  font-size:11.5px; color:rgba(var(--tx),.5); }
.mst-stripe-tag{ display:inline-flex; align-items:center; gap:5px; font-weight:800; color:var(--strong); padding:3px 8px; border-radius:7px; background:rgba(var(--sg),.1); }
.mst-err{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 13px; border-radius:12px;
  background:rgba(232,101,75,.1); border:1px solid rgba(232,101,75,.28); color:#E8654B; font-size:12.5px; }

/* confirmación */
.mst-done{ text-align:center; padding:14px 4px 8px; }
.mst-done-ic{ width:60px; height:60px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; background:#37E6A4; }
.mst-done-t{ font-size:21px; font-weight:800; color:var(--strong); letter-spacing:-.02em; }
.mst-done-m{ font-size:14px; line-height:1.55; color:rgba(var(--tx),.7); margin:10px auto 0; max-width:340px; }

/* pie / navegación */
.mst-foot{ display:flex; gap:10px; padding:16px 22px 20px; border-top:1px solid rgba(var(--sg),.12); }
.mst-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:14px; font-weight:700;
  border-radius:12px; cursor:pointer; padding:12px 18px; transition:filter .14s, opacity .14s, border-color .14s; border:1px solid transparent; }
.mst-btn.ghost{ background:transparent; border-color:rgba(var(--sg),.22); color:rgba(var(--tx),.75); }
.mst-btn.ghost:hover:not(:disabled){ color:var(--strong); border-color:rgba(var(--sg),.4); }
.mst-btn.primary{ flex:1; background:#37E6A4; color:#04130D; }
.mst-btn.primary:hover:not(:disabled){ filter:brightness(1.06); }
.mst-btn.primary.wide{ flex:1; }
.mst-btn:disabled{ opacity:.5; cursor:default; }

@media (max-width:520px){ .mst-row2{ grid-template-columns:1fr; } }