/* =====================================================================
   Amor Canino Market · páginas públicas del marketplace
   (Vende con nosotros). Usa las variables de site.css.
   ===================================================================== */

/* ---------- Portada ---------- */
.mk-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.mk-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 380px at 90% 0%,rgba(226,112,28,.25),transparent 60%)}
.mk-hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;padding-top:48px;padding-bottom:52px;align-items:center}
.mk-hero .kicker{color:#FFB27A}
.mk-hero h1{font-size:clamp(36px,5vw,58px);font-weight:800;line-height:.98;letter-spacing:-.04em}
.mk-hero h1 em{font-style:normal;color:var(--orange)}
.mk-hero .lede{color:#D5DDE8;font-size:17px;margin-top:16px;max-width:48ch}
.mk-benefits{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.mk-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#E3E8EF}
.mk-benefits b{color:#fff;display:block}
.mk-benefits .ic{width:34px;height:34px;flex:none;border-radius:10px;background:#24395A;color:#FFB27A;display:grid;place-items:center;font:800 14px var(--display)}
.mk-side{background:#FBF6EF;color:var(--ink);border-radius:24px;padding:26px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.mk-side h2{font-size:24px;font-weight:800;margin-bottom:8px}
.mk-side p{color:var(--muted);font-size:14.5px}
.mk-side .btns{display:grid;gap:10px;margin-top:18px}
.mk-side .btn-primary{color:var(--ink)}
.mk-steps5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:20px}
.mk-steps5 div{background:#fff;border:1px solid #EFE3D3;border-radius:12px;padding:10px 8px;text-align:center}
.mk-steps5 i{display:block;font:700 10px var(--mono);color:var(--orange-dk);font-style:normal;letter-spacing:.08em}
.mk-steps5 span{display:block;font-size:12.5px;font-weight:600;margin-top:4px}

/* ---------- Estado de la solicitud ---------- */
.mk-status{display:grid;gap:16px}
.mk-badge{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:6px}
.mk-badge.info{background:#E6EFFA;color:#2463B0}
.mk-badge.warn{background:#FDF1DA;color:#A56300}
.mk-badge.good{background:var(--green-tint);color:var(--green)}
.mk-badge.bad{background:#FBE7E4;color:#B4372B}
.mk-badge.neutral{background:var(--sand);color:var(--muted)}
.mk-track{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mk-track li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding-bottom:16px;position:relative}
.mk-track li:not(:last-child)::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--line)}
.mk-track li.done:not(:last-child)::before{background:var(--green)}
.mk-track i{width:26px;height:26px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:700 12px var(--display);font-style:normal;color:var(--muted)}
.mk-track .done i{background:var(--green);color:#fff}
.mk-track .now i{background:var(--orange);color:var(--ink)}
.mk-track b{display:block;font-size:14.5px}
.mk-track small{color:var(--muted);font-size:13px}
.mk-msg{background:#FFF8EF;border:1px solid #F1D4B4;border-left:4px solid var(--orange);border-radius:12px;padding:14px 16px;font-size:14.5px;color:#5A3A1C;white-space:pre-line}
.mk-msg b{color:var(--orange-dk)}

/* ---------- Formulario por pasos ---------- */
.mk-form-wrap{padding:44px 0 70px}
.mk-form{max-width:860px;margin:0 auto}
.mk-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
.mk-progress button{all:unset;cursor:pointer;display:block}
.mk-progress .bar{height:6px;border-radius:4px;background:var(--line);transition:background .2s}
.mk-progress small{display:block;font:600 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.mk-progress .on .bar{background:var(--orange)}
.mk-progress .on small{color:var(--orange-dk)}
.mk-progress .err .bar{background:#B4372B}
.mk-step{display:none}
.mk-step.on{display:block}
.mk-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:grid;gap:18px}
.mk-card h2{font-size:28px;font-weight:800}
.mk-card .intro{color:var(--muted);margin-top:-8px}
.mk-card .field .hint{font-size:12.5px;color:var(--muted)}
.mk-card .field input[aria-invalid=true],.mk-card .field select[aria-invalid=true],.mk-card .field textarea[aria-invalid=true]{border-color:#B4372B;background:#FFF7F6}
.mk-seg{display:flex;background:var(--sand);border-radius:10px;padding:4px;gap:4px}
.mk-seg label{flex:1;text-align:center;padding:10px;border-radius:7px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer}
.mk-seg input{position:absolute;opacity:0;pointer-events:none}
.mk-seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mk-up{border:1.5px dashed #CFC6BA;border-radius:var(--r);padding:14px 16px;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;background:var(--paper)}
.mk-up.has{border-style:solid;border-color:#BFE3CF;background:#F6FBF8}
.mk-up.bad{border-color:#E8B4AD;background:#FFF7F6}
.mk-up .ic{width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center}
.mk-up .ic svg{width:22px;height:22px;color:var(--ink)}
.mk-up b{display:block;font-size:15px}
.mk-up small{display:block;color:var(--muted);font-size:12.5px}
.mk-up .files{display:block;font:500 11.5px/1.4 var(--mono);color:var(--green);margin-top:3px;word-break:break-all}
.mk-up .pick{position:relative;overflow:hidden}
.mk-up .pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mk-up .err{grid-column:1/-1;font-size:13px;color:#B4372B}
.mk-up .acu-msg{grid-column:1/-1}
.mk-checks{display:grid;gap:12px}
.mk-checks label{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14.5px;cursor:pointer}
.mk-checks input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange);flex:none}
.mk-checks b{display:block}
.mk-checks small{color:var(--muted);font-size:13px}
.mk-nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.mk-nav .btn-primary{color:var(--ink)}
.mk-errors{background:#FBE7E4;color:#B4372B;border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:14px}
.mk-errors ul{margin:6px 0 0;padding-left:18px}
.mk-kept{font-size:12.5px;color:var(--green);font-weight:600}

@media (max-width:900px){
  .mk-hero .wrap{grid-template-columns:1fr}
  .mk-steps5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .mk-card{padding:20px}
  .mk-up{grid-template-columns:40px 1fr}
  .mk-up .pick{grid-column:1/-1}
  .mk-progress small{font-size:9px}
}