/* ===== Locker Atletas — sistema de diseño premium (negro · blanco · dorado) ===== */
:root{
  --bg:#ffffff;--bg-2:#f5f6f7;--ink:#0a0a0a;--ink-2:#1c1c1c;
  --gris:#6b6b6b;--gris-2:#9a9a9a;--linea:#e7e8ea;
  --oro:#C6A15B;--oro-2:#d9bd7e;--oro-dark:#8a6d2e;
  --rojo:#c0392b;--ok:#2e7d32;--wa:#25d366;
  --radius:14px;--shadow:0 10px 40px rgba(0,0,0,.08);--shadow-lg:0 22px 60px rgba(0,0,0,.14);
  --maxw:1340px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.accent{color:var(--oro-dark)}
.muted{color:var(--gris)}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--oro-dark)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 4%}
.hide{display:none!important}

/* ===== BOTONES ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:700;border-radius:999px;transition:all .2s;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;padding:13px 26px;line-height:1}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-gold{background:var(--oro);color:var(--ink)}.btn-gold:hover{background:var(--oro-2);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-line{border:1px solid var(--linea);color:var(--ink);background:#fff}.btn-line:hover{border-color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:.74rem}
.btn-block{width:100%}
.btn-wa{background:var(--wa);color:#fff}

/* ===== HEADER (compartido) ===== */
header.la{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--linea)}
.topbar{background:var(--ink);color:#fff;text-align:center;font-size:.74rem;letter-spacing:.05em;padding:7px 16px;font-weight:500}
.topbar b{color:var(--oro)}
.hdr{display:flex;align-items:center;gap:22px;max-width:var(--maxw);margin:0 auto;padding:12px 4%}
.logo{font-weight:900;font-size:1.18rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo b{color:var(--oro-dark)}
.logo .mk{width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--oro);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem}
.search{flex:1;display:flex;align-items:center;gap:9px;background:var(--bg-2);border:1px solid var(--linea);border-radius:999px;padding:10px 18px;max-width:520px}
.search input{flex:1;border:none;background:none;outline:none;font-size:.92rem;font-family:inherit;color:var(--ink)}
.hdr-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto}
.iconbtn{background:none;border:none;cursor:pointer;font-size:1.12rem;display:flex;align-items:center;color:var(--ink);position:relative;text-decoration:none}
.badge-n{position:absolute;top:-7px;right:-9px;background:var(--oro);color:var(--ink);font-size:.58rem;font-weight:800;min-width:16px;height:16px;padding:0 3px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.catnav{border-top:1px solid var(--linea)}
.catnav-inner{display:flex;gap:6px;overflow-x:auto;max-width:var(--maxw);margin:0 auto;padding:10px 4%;scrollbar-width:none}
.catnav-inner::-webkit-scrollbar{display:none}
.cat{flex-shrink:0;padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:all .2s;border:1px solid transparent;background:none}
.cat:hover{background:var(--bg-2)}
.cat.active{background:var(--ink);color:#fff}
@media(max-width:820px){.search{display:none}}

/* ===== PRODUCT CARD ===== */
.grid-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px}
@media(max-width:1100px){.grid-prod{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grid-prod{grid-template-columns:repeat(2,1fr);gap:22px 14px}}
@media(max-width:430px){.grid-prod{grid-template-columns:repeat(2,1fr)}}
.prod{cursor:pointer;display:block}
.prod .ph{position:relative;overflow:hidden;border-radius:12px;background:var(--bg-2);border:1px solid var(--linea);aspect-ratio:4/5;transition:transform .35s,box-shadow .35s}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod:hover .ph{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prod:hover .ph img{transform:scale(1.05)}
.ph-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--gris-2);font-size:1.7rem}
.chip{position:absolute;top:10px;left:10px;background:var(--oro);color:var(--ink);font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;z-index:2}
.chip.dark{background:rgba(0,0,0,.72);color:#fff}
.chip.sign{background:var(--ink);color:var(--oro)}
.heart{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.92);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;border:none;cursor:pointer;z-index:2;transition:transform .2s}
.heart:hover{transform:scale(1.12)}
.heart.on{color:var(--oro-dark)}
.seal{position:absolute;bottom:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--oro-dark);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;box-shadow:0 3px 12px rgba(0,0,0,.14);z-index:2}
.pinfo{padding:13px 2px 0}
.pinfo .brand{font-size:.73rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:600;display:flex;align-items:center;gap:4px}
.pinfo .brand .tk{color:var(--oro-dark)}
.pinfo .name{font-size:.97rem;font-weight:700;margin:3px 0;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.pinfo .size{font-size:.79rem;color:var(--gris)}
.pinfo .row{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.pinfo .price{font-size:1.05rem;font-weight:800}
.pinfo .old{font-size:.82rem;color:var(--gris-2);text-decoration:line-through}

/* ===== FORMS ===== */
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px;letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--linea);border-radius:10px;padding:12px 14px;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--oro)}
.field textarea{resize:vertical;min-height:90px}
.field .hint{font-size:.76rem;color:var(--gris);margin-top:5px}
.auth-wrap{max-width:420px;margin:60px auto;padding:36px;border:1px solid var(--linea);border-radius:18px;box-shadow:var(--shadow)}
.auth-wrap h1{font-size:1.7rem;margin-bottom:6px}
.auth-wrap .sub{color:var(--gris);font-size:.92rem;margin-bottom:24px}
.auth-wrap .alt{text-align:center;margin-top:18px;font-size:.88rem;color:var(--gris)}
.auth-wrap .alt a{color:var(--oro-dark);font-weight:700}
.pwrap{position:relative}
.pwrap .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1rem;color:var(--gris)}

/* ===== ALERTS / MISC ===== */
.alert{padding:11px 15px;border-radius:10px;font-size:.88rem;margin-bottom:14px}
.alert-err{background:#fdecea;color:var(--rojo);border:1px solid #f5c6c0}
.alert-ok{background:#eafaf1;color:var(--ok);border:1px solid #bfe6cd}
.section{padding:60px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 44px}
.section-head .eyebrow{display:block;margin-bottom:12px}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.section-head p{color:var(--gris);margin-top:12px}
.avatar{border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#2a2a2a,#161616)}
.tk-verif{color:var(--oro-dark)}
.empty{text-align:center;color:var(--gris);padding:50px 20px}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== TABS (panel) ===== */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--linea);margin-bottom:28px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:13px 18px;font-size:.88rem;font-weight:700;color:var(--gris);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tab.active{color:var(--ink);border-bottom-color:var(--oro)}
.tab .n{background:var(--oro);color:var(--ink);font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:6px}

/* ===== TOAST ===== */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:.9rem;font-weight:600;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;box-shadow:var(--shadow-lg)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== FOOTER ===== */
footer.la{background:var(--ink);color:#cfd1d4;padding:54px 4% 30px;margin-top:60px}
footer.la .fg{display:flex;justify-content:space-between;gap:38px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto 28px}
footer.la .fb{max-width:300px}footer.la .fb .logo{color:#fff;margin-bottom:12px}
footer.la .fb p{color:#8b8e93;font-size:.88rem}
footer.la .fcols{display:flex;gap:52px;flex-wrap:wrap}
footer.la h5{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8b8e93;margin-bottom:13px}
footer.la .fcol a{display:block;color:#cfd1d4;font-size:.88rem;margin-bottom:9px;transition:color .2s}
footer.la .fcol a:hover{color:var(--oro)}
footer.la .copy{text-align:center;color:#7e8186;font-size:.8rem;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);max-width:var(--maxw);margin:0 auto}
footer.la .built{margin-top:9px;font-style:italic;opacity:.7}
footer.la .built a:hover{color:var(--oro)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.vis{opacity:1;transform:none}