:root{
  --bg:#0f1115; --ink:#e7e9ee; --mut:#9aa3b2; --pri:#ff5a5f; --accent:#ff936a;
  --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
  radial-gradient(1200px 800px at 80% -20%, #ff936815 0, #0000 60%),
  radial-gradient(900px 600px at -10% 110%, #5af8ff14 0,#0000 60%), var(--bg);
  color:var(--ink); font:16px/1.35 Inter, system-ui, Segoe UI, Roboto, Arial;
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-bottom:1px solid var(--stroke); backdrop-filter:blur(6px);
}
.brand{font-weight:800; letter-spacing:.5px}
.filters .like-btn{
  display:inline-block; margin-left:6px; padding:8px 12px; border:1px solid var(--stroke);
  border-radius:999px; background:var(--glass); cursor:pointer; transition:.2s;
}
.filters .like-btn:hover{transform:translateY(-1px); box-shadow:0 6px 24px #0006}

.shell{display:grid; place-items:center; padding:32px}
.card{
  width:min(1050px,92vw); background:linear-gradient(180deg,#ffffff08,#ffffff05);
  border:1px solid var(--stroke); border-radius:24px; padding:20px; box-shadow:0 20px 80px #0008;
}

/* Tabs (sin JS) */
.tabs input{display:none}
.tabbar{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px}
.tabbar label{
  text-align:center; padding:10px 14px; border:1px solid var(--stroke);
  border-radius:12px; background:var(--glass); cursor:pointer; transition:.2s;
}
#tab-nome:checked ~ .tabbar label[for=tab-nome],
#tab-sobre:checked ~ .tabbar label[for=tab-sobre],
#tab-ofertas:checked ~ .tabbar label[for=tab-ofertas],
#tab-outros:checked ~ .tabbar label[for=tab-outros]{ background:#fff1; border-color:#fff3; box-shadow:inset 0 0 0 2px #fff2}
.tabcontent{display:none; animation:fade .25s ease}
#tab-nome:checked ~ #c-nome,
#tab-sobre:checked ~ #c-sobre,
#tab-ofertas:checked ~ #c-ofertas,
#tab-outros:checked ~ #c-outros{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}}

/* Perfil */
.profile{display:flex; gap:18px; align-items:center}
.avatar{
  width:120px;height:120px;border-radius:22px; background:
  radial-gradient(60px 60px at 70% 35%, #fff2 0,#0000 60%),
  linear-gradient(135deg,#2a2e35,#1a1d22);
  border:2px solid #ffffff22; box-shadow:0 10px 40px #0008;
  position:relative; overflow:hidden;
}
.avatar::after{
  content:""; position:absolute; inset:-40% -60% auto auto; width:160%; height:160%;
  background:conic-gradient(from 0deg,#ffb56b22,#ff5a5f22,#7ee8fa22,#ffb56b22);
  filter:blur(24px); animation:spin 8s linear infinite; opacity:.25;
}
@keyframes spin{to{transform:rotate(360deg)}}
.meta{display:grid; gap:10px}
.stat{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:10px; color:var(--mut)}
.s-label{font-size:12px; letter-spacing:.2px}
.s-bar{--v:50%; position:relative; height:8px; border-radius:999px; background:#ffffff12}
.s-bar::after{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--v); background:linear-gradient(90deg,var(--accent),var(--pri));
  border-radius:inherit; box-shadow:0 0 12px var(--accent);
}

/* Microcards */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0}
.microcards article{
  border:1px solid var(--stroke); background:var(--glass); border-radius:16px; padding:14px; min-height:84px;
  transition:.2s; position:relative; overflow:hidden;
}
.microcards article::before{
  content:""; position:absolute; inset:auto -30% -50% auto; width:60%; height:120%;
  background:radial-gradient(60% 60% at 50% 50%,#fff2 0,#0000 60%);
  transform:rotate(-12deg);
}
.microcards article:hover{transform:translateY(-2px); box-shadow:0 12px 40px #0006}
.microcards h5{margin:0 0 6px; font-size:12px; color:var(--mut); letter-spacing:.4px; text-transform:uppercase}
.pillbar{display:flex; gap:8px; justify-content:center; margin-top:10px}
.pill{border:1px solid var(--stroke); background:var(--glass); padding:6px 12px; border-radius:999px}

/* Galería */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery figure{aspect-ratio:1/1; border-radius:16px; border:1px dashed #ffffff33; display:grid; place-items:center; color:var(--mut); transition:.2s}
.gallery figure:hover{transform:scale(1.03); border-style:solid}
.gallery .more{background:#ffffff08}
.hint{color:var(--mut); margin-top:8px}

/* Ofertas + tooltips */
.offers{display:grid; gap:10px; list-style:none; padding:0; margin:0}
.offers li{
  padding:12px 14px; border:1px solid var(--stroke); border-radius:12px; background:var(--glass);
  position:relative; cursor:default;
}
.offers li::after{
  content:attr(data-tip); position:absolute; left:14px; bottom:calc(100% + 10px);
  background:#000; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; white-space:nowrap;
  opacity:0; transform:translateY(6px); transition:.2s; pointer-events:none;
}
.offers li:hover::after{opacity:1; transform:translateY(0)}
.chips{display:flex; gap:8px}
.chip{padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:var(--glass)}
@media (max-width:760px){
  .grid3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .profile{flex-direction:column; align-items:flex-start}
}