/* Market Asere — estilos compartidos (landing, acceso y panel).
   Si se cambia algo aqui, subir el ?v= en los HTML o el visitante se queda
   con la version vieja (nginx cachea los .css). */

:root{
  --bg:#0b0d10;
  --bg2:#0f1318;
  --card:#151a20;
  --card2:#1b2129;
  --line:#242c36;
  --tx:#eef2f6;
  --sub:#9aa5b1;
  --ac:#ffcc33;
  --ac2:#e6b31f;
  --ok:#34d17a;
  --bad:#ff6b6b;
  --r:14px;
  --safe-top:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--tx);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ── Barra superior ─────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,13,16,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-top);
}
.nav .in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:19px}
.logo b{color:var(--ac)}
.logo .mk{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--ac),var(--ac2));
  display:grid;place-items:center;color:#111;font-weight:900;font-size:15px;
}
.nav .sp{flex:1}
.nav a.lnk{color:var(--sub);font-size:15px;font-weight:600}
.nav a.lnk:hover{color:var(--tx)}

/* ── Botones ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ac);color:#101010;font-weight:700;font-size:15px;
  border:0;border-radius:11px;padding:12px 20px;cursor:pointer;
  transition:filter .15s,transform .1s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.gh{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn.gh:hover{border-color:var(--ac);color:var(--ac);filter:none}
.btn.full{width:100%}
.btn[disabled]{opacity:.55;cursor:default}

/* ── Portada ────────────────────────────────────────────────── */
.hero{padding:80px 0 70px;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:760px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,204,51,.14),transparent);
  pointer-events:none;
}
.tag{
  display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);border:1px solid rgba(255,204,51,.45);border-radius:999px;
  padding:6px 14px;margin-bottom:22px;font-weight:700;
}
.hero h1{
  font-size:clamp(32px,6vw,54px);line-height:1.1;letter-spacing:-.03em;
  font-weight:800;margin-bottom:18px;position:relative;
}
.hero h1 span{color:var(--ac)}
.hero p.lead{
  color:var(--sub);font-size:clamp(16px,2.2vw,19px);max-width:600px;
  margin:0 auto 30px;position:relative;
}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
.nota{color:var(--sub);font-size:13px;margin-top:16px;position:relative}

/* ── Secciones ──────────────────────────────────────────────── */
.sec{padding:64px 0;border-top:1px solid var(--line)}
.sec h2{font-size:clamp(24px,4vw,34px);letter-spacing:-.02em;margin-bottom:12px;font-weight:800}
.sec .sub{color:var(--sub);margin-bottom:34px;max-width:620px}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.box{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;transition:border-color .15s,transform .15s;
}
.box:hover{border-color:#33404e;transform:translateY(-2px)}
.box .ic{
  width:40px;height:40px;border-radius:11px;background:rgba(255,204,51,.12);
  display:grid;place-items:center;margin-bottom:14px;color:var(--ac);font-weight:800;
}
.box h3{font-size:17px;margin-bottom:7px;font-weight:700}
.box p{color:var(--sub);font-size:15px}

.pasos{counter-reset:p;display:grid;gap:14px}
.paso{display:flex;gap:16px;align-items:flex-start;background:var(--card);
      border:1px solid var(--line);border-radius:var(--r);padding:20px}
.paso .n{
  counter-increment:p;flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--ac);color:#111;display:grid;place-items:center;font-weight:800;font-size:15px;
}
.paso .n::before{content:counter(p)}
.paso h3{font-size:16px;font-weight:700;margin-bottom:4px}
.paso p{color:var(--sub);font-size:15px}

/* ── Precio ─────────────────────────────────────────────────── */
.precio{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid rgba(255,204,51,.3);border-radius:18px;
  padding:34px;text-align:center;max-width:460px;margin:0 auto;
}
.precio .big{font-size:46px;font-weight:800;letter-spacing:-.03em;color:var(--ac);line-height:1.1}
.precio .luego{color:var(--sub);font-size:15px;margin:10px 0 22px}
.precio ul{list-style:none;text-align:left;display:grid;gap:9px;margin-bottom:24px}
.precio li{font-size:15px;padding-left:25px;position:relative;color:var(--tx)}
.precio li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
                   border-radius:50%;background:var(--ok)}

/* ── Pie ────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);padding:34px 0;color:var(--sub);font-size:14px;text-align:center}
.pie a{color:var(--ac)}

/* ── Formularios (acceso) ───────────────────────────────────── */
.centro{min-height:100vh;display:grid;place-items:center;padding:26px 20px}
.panelform{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:32px 26px;
}
.panelform h1{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;text-align:center}
.panelform .desc{color:var(--sub);font-size:14.5px;text-align:center;margin-bottom:24px}

.tabs{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:22px}
.tabs button{flex:1;background:transparent;border:0;padding:9px;border-radius:8px;
             font-weight:700;font-size:14.5px;color:var(--sub);cursor:pointer}
.tabs button.on{background:var(--ac);color:#111}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:600;color:var(--sub);margin-bottom:6px}
.campo input,.campo select{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;font-size:15px;outline:0;transition:border-color .15s;
}
.campo input:focus,.campo select:focus{border-color:var(--ac)}
.fila{display:flex;gap:10px}
.fila>*{flex:1}

.aviso{border-radius:10px;padding:11px 13px;font-size:14px;margin-bottom:14px;display:none}
.aviso.err{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4);color:#ffb3b3;display:block}
.aviso.ok{background:rgba(52,209,122,.12);border:1px solid rgba(52,209,122,.4);color:#9ff0c4;display:block}
.mini{text-align:center;margin-top:16px;font-size:14px;color:var(--sub)}
.mini a{color:var(--ac);font-weight:600;cursor:pointer}

/* ── Panel del vendedor ─────────────────────────────────────── */
.cab{display:flex;align-items:center;gap:14px;margin:26px 0 22px;flex-wrap:wrap}
.cab h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.cab .sp{flex:1}

.tiendas{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.tcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;
}
.tcard:hover{border-color:var(--ac);transform:translateY(-2px)}
.tcard .por{height:96px;background:linear-gradient(135deg,#1c232c,#131920);position:relative}
.tcard .por img{width:100%;height:100%;object-fit:cover}
.tcard .lg{
  width:52px;height:52px;border-radius:13px;border:3px solid var(--card);
  position:absolute;left:16px;bottom:-24px;background:var(--card2);object-fit:cover;
}
.tcard .lg.ph{display:grid;place-items:center;color:var(--ac);font-weight:800;font-size:20px}
.tcard .cu{padding:32px 16px 16px}
.tcard h3{font-size:16.5px;font-weight:700;margin-bottom:3px}
.tcard .met{color:var(--sub);font-size:13.5px}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 17px;min-width:118px}
.chip .k{color:var(--sub);font-size:12.5px;margin-bottom:3px}
.chip .v{font-size:21px;font-weight:800;letter-spacing:-.02em}
.chip .v.ac{color:var(--ac)}

.prods{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pcard .im{aspect-ratio:1;background:var(--card2);overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover}
.pcard .cu{padding:11px}
.pcard .ti{font-size:13.5px;line-height:1.35;margin-bottom:6px;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pr{font-weight:800;color:var(--ac);font-size:15.5px}
.pcard .st{color:var(--sub);font-size:12px;margin-top:3px}

.vacio{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);
       padding:44px 24px;text-align:center;color:var(--sub)}
.vacio h3{color:var(--tx);font-size:18px;margin-bottom:8px;font-weight:700}
.vacio p{margin-bottom:18px;font-size:15px}

.cargando{text-align:center;padding:60px 20px;color:var(--sub)}

@media(max-width:640px){
  .hero{padding:54px 0 46px}
  .sec{padding:46px 0}
  .nav a.lnk.ocultar{display:none}
  .panelform{padding:26px 20px}
}