/* AM Fitness & Health — estilos de la página principal (misma paleta del brochure de socios) */
:root{
  --bg:#0b0b0b; --bg2:#111; --card:#141414; --line:#262626; --line2:#333;
  --ink:#f4f4f5; --muted:#a1a1aa; --dim:#71717a;
  --bronze1:#dfa375; --bronze2:#a76d43; --bronze3:#875229; --orange:#f97316; --green:#34d399; --red:#f87171;
  --f:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.6;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--bronze1);outline-offset:3px}
.bt{background:linear-gradient(135deg,var(--bronze1),var(--bronze2) 50%,var(--bronze3));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 26px;font:700 14px var(--f);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s,opacity .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-b{background:linear-gradient(135deg,var(--bronze1),var(--bronze2));color:#fff;box-shadow:0 10px 30px -10px rgba(167,109,67,.6)}
.btn-o{background:transparent;border-color:#3f3f46;color:#e4e4e7}
.btn-o:hover{background:#18181b}
.chip{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);color:#fb923c;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sec{padding-block:84px}
.sec-h{text-align:center;display:grid;gap:10px;justify-items:center;margin-bottom:44px}
.sec-h h2{font-size:clamp(28px,4vw,40px);font-weight:800}
.sec-h p{color:var(--muted);max-width:60ch}
.demo{background:rgba(249,115,22,.1);border-bottom:1px solid rgba(249,115,22,.3);color:#fdba74;font-size:12px;text-align:center;padding:7px 16px}

/* nav */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(11,11,11,.88);backdrop-filter:blur(12px);border-bottom:1px solid #1c1c1c}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .coin{width:42px;height:42px;flex:none;border-radius:50%;overflow:hidden;box-shadow:0 0 12px -2px rgba(223,163,117,.45)}
.coin img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.34);transform-origin:49% 50%}
.logo span{font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:8px 14px;font-size:13px;font-weight:600;color:#d4d4d8;text-decoration:none}
.menu a:hover{color:var(--bronze1)}
.nav-r{display:flex;align-items:center;gap:8px}
.cart-btn{position:relative;width:44px;height:44px;border-radius:50%;background:#18181b;border:1px solid var(--line2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.cart-btn svg{width:20px;height:20px}
.badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:linear-gradient(135deg,var(--bronze1),var(--bronze2));color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;transition:transform .25s}
.badge.pop{transform:scale(1.35)}
.burger{display:none;background:none;border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:8px 12px;font:700 12px var(--f);cursor:pointer}
@media (max-width:820px){
  .burger{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#0b0b0b;border-bottom:1px solid #1c1c1c;padding:10px 20px 18px}
  .menu.open{display:flex}
}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid #1c1c1c}
.hero::before{content:"";position:absolute;inset:-20px;background:url("../socios/img/sitio/Preparate.jpeg") center/cover,url("../socios/img/Preparate.jpeg") center/cover;filter:blur(6px);opacity:.16}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.94) 75%,var(--bg))}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-block:72px 80px}
.hero h1{font-size:clamp(38px,6vw,66px);font-weight:900;margin:18px 0}
.hero .lead{color:#c4c4c8;font-size:clamp(15px,1.6vw,18px);max-width:50ch}
.pillars{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 30px}
.pillars span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:8px;background:#141414;border:1px solid var(--line2)}
.pillars span:nth-child(1){color:#fb923c}.pillars span:nth-child(2){color:#60a5fa}.pillars span:nth-child(3){color:#facc15}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.medal{position:relative;justify-self:center;width:min(360px,100%);aspect-ratio:1;max-width:100%}
.medal .coin{width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px rgba(167,109,67,.06),0 30px 80px -20px rgba(223,163,117,.45)}
.medal .ring{position:absolute;inset:-18px;border-radius:50%;border:1px dashed rgba(223,163,117,.35);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.pillars,.cta{justify-content:center}.medal{width:min(240px,75%);order:-1}}

/* shop */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:rgba(9,9,11,.6);border:1px solid #27272a;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;transition:border-color .3s,transform .3s}
.card:hover{border-color:#3f3f46;transform:translateY(-4px)}
.pic{position:relative;border-radius:12px;overflow:hidden;background:#18181b;aspect-ratio:1/1}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .pic img{transform:scale(1.05)}
.tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.t-or{background:#f97316;color:#000}.t-bl{background:#3b82f6;color:#fff}.t-ye{background:#eab308;color:#000}
.c-or{color:#f97316}.c-bl{color:#60a5fa}.c-ye{color:#facc15}
.card h3{font-size:22px;font-weight:700}
.sub{color:var(--dim);font-size:13px;margin-top:4px}
.ben{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13.5px;color:#d4d4d8}
.ben li{display:flex;gap:8px}
.buy{margin-top:auto;padding-top:16px;border-top:1px solid #1f1f1f;display:grid;gap:12px}
.price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.price small{font-size:11px;color:var(--dim);font-weight:500}
.stock{font-size:12px;font-weight:600;color:var(--green)}
.stock.low{color:#fb923c}
.buy-row{display:flex;gap:10px}
.qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:999px;overflow:hidden;flex:none}
.qty button{width:36px;height:44px;background:#18181b;border:0;color:#e4e4e7;font-size:16px;cursor:pointer}
.qty button:hover{background:#27272a}
.qty input{width:40px;height:44px;text-align:center;background:#18181b;border:0;color:#fff;font:700 14px var(--f);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.add{flex:1;padding:12px 16px}

/* nosotros */
.about{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.about > div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;display:grid;gap:10px;align-content:start}
.about h3{font-size:19px;font-weight:800}
.about p{color:var(--muted);font-size:14px}
.quality{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;padding:0!important}
.quality div{padding:22px;display:grid;gap:4px}
.quality div+div{border-left:1px solid var(--line)}
.quality b{font-size:14px}
.quality span{font-size:12.5px;color:var(--dim)}
@media (max-width:820px){.about{grid-template-columns:1fr}.quality{grid-template-columns:1fr 1fr}.quality div:nth-child(3){border-left:0}.quality div:nth-child(n+3){border-top:1px solid var(--line)}}

/* contacto */
.contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.contact a{display:grid;gap:4px;padding:22px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.contact a:hover{border-color:rgba(249,115,22,.4)}
.contact small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.contact b{font-size:17px;overflow-wrap:anywhere}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
footer{border-top:1px solid #1c1c1c;padding-block:28px;text-align:center;color:var(--dim);font-size:12px}

/* carrito */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:#0f0f0f;border-left:1px solid #222;z-index:50;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #1f1f1f}
.dh h3{font-size:17px;font-weight:800}
.x{background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
.items{flex:1;overflow:auto;padding:12px 20px;display:grid;gap:12px;align-content:start}
.it{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:12px;background:#151515;border:1px solid #222}
.it img{width:60px;height:60px;border-radius:8px;object-fit:cover}
.it b{font-size:14px;display:block}
.it small{color:var(--dim);font-size:12px}
.it .qty button{height:30px;width:28px}.it .qty input{height:30px;width:30px;font-size:12px}
.it .r{display:grid;gap:6px;justify-items:end}
.rm{background:none;border:0;color:var(--dim);font-size:11px;cursor:pointer;text-decoration:underline}
.empty{text-align:center;color:var(--dim);padding:40px 10px}
.df{padding:16px 20px 20px;border-top:1px solid #1f1f1f;display:grid;gap:12px}
.tot{display:flex;justify-content:space-between;align-items:baseline}
.tot b{font-size:22px;font-variant-numeric:tabular-nums}
.opt{display:grid;gap:6px}
.opt > span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.opt label{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line2);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer}
.opt input{accent-color:var(--bronze2)}
.opt label:has(input:checked){border-color:var(--bronze1);background:rgba(223,163,117,.08)}
.note{font-size:11.5px;color:var(--dim);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,120px);background:#18181b;border:1px solid var(--bronze2);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;font-size:13px;z-index:60;transition:transform .35s;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{transform:translate(-50%,0)}

/* precios con descuento */
.price .was{display:block;font-size:13px;color:var(--dim);text-decoration:line-through;font-weight:600}
.dsc{position:absolute;top:14px;left:14px;background:linear-gradient(135deg,var(--bronze1),var(--bronze2));color:#fff;font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px}
.stock.out{color:var(--red)}
.card.out .pic img{filter:grayscale(.7);opacity:.7}
.add:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* checkout */
.form{display:grid;gap:10px}
.form input[type=text],.form input[type=tel],.form textarea{width:100%;background:#18181b;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:#fff;font:500 13px var(--f)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--bronze1)}
.bank{white-space:pre-line;background:#151515;border:1px solid rgba(223,163,117,.35);border-radius:10px;padding:12px;font-size:12.5px;color:#e4e4e7}
.err{color:var(--red);font-size:12px;text-align:center}
[hidden]{display:none!important}
/* colores de etiqueta y ✔ elegidos en el panel (mismos nombres que el brochure) */
.bg-orange-500{background:#f97316}.bg-blue-500{background:#3b82f6}.bg-yellow-500{background:#eab308}.bg-emerald-500{background:#10b981}
.bg-red-500{background:#ef4444}.bg-purple-500{background:#a855f7}.bg-pink-500{background:#ec4899}
.bg-gradient-bronze{background:linear-gradient(135deg,var(--bronze1),var(--bronze2))}
.text-black{color:#000}.text-white{color:#fff}
.text-orange-500{color:#f97316}.text-orange-300{color:#fdba74}.text-blue-400{color:#60a5fa}.text-yellow-400{color:#facc15}
.text-emerald-400{color:#34d399}.text-red-400{color:#f87171}.text-purple-400{color:#c084fc}.text-pink-400{color:#f472b6}
/* colores adicionales de etiqueta y ✔ */
.bg-amber-400{background:#fbbf24}.bg-rose-400{background:#fb7185}.bg-fuchsia-500{background:#d946ef}.bg-violet-600{background:#7c3aed}
.bg-indigo-500{background:#6366f1}.bg-sky-500{background:#0ea5e9}.bg-cyan-400{background:#22d3ee}.bg-teal-500{background:#14b8a6}
.bg-lime-400{background:#a3e635}.bg-green-700{background:#15803d}.bg-zinc-300{background:#d4d4d8}.bg-white{background:#fff}
.text-amber-300{color:#fcd34d}.text-rose-300{color:#fda4af}.text-fuchsia-400{color:#e879f9}.text-violet-400{color:#a78bfa}
.text-indigo-400{color:#818cf8}.text-sky-400{color:#38bdf8}.text-cyan-300{color:#67e8f9}.text-teal-400{color:#2dd4bf}
.text-lime-400{color:#a3e635}.text-green-500{color:#22c55e}.text-zinc-300{color:#d4d4d8}