/* CIRUELISTAS — Link in bio (oscuro, mate) */
* { box-sizing: border-box; }
:root{
  --bg: #0b0c0e;
  --overlay: rgba(0,0,0,.40);
  --text: #f3f4f6;
  --muted: #c9cbd1;
  --card: rgba(18,18,20,.78);
  --stroke: rgba(255,255,255,.08);
  --green: #00C37A;
  --red: #C22222;
  --purple: #7D3AC1;
  --yellow: #E4B300;
  --teal: #00A693;
  --orange: #FF7A2A;
  --white: #ffffff;
}

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Static multicolor gradient inspired by logo */
.bg{
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--overlay), var(--overlay)),
    radial-gradient(1200px 600px at 10% 20%, rgba(0,195,122,.45), transparent 60%),
    radial-gradient(1000px 500px at 85% 15%, rgba(194,34,34,.35), transparent 60%),
    radial-gradient(900px 450px at 20% 80%, rgba(125,58,193,.35), transparent 60%),
    radial-gradient(900px 450px at 75% 75%, rgba(228,179,0,.35), transparent 60%),
    radial-gradient(700px 350px at 50% 50%, rgba(0,166,147,.30), transparent 60%),
    radial-gradient(600px 300px at 55% 40%, rgba(255,255,255,.10), transparent 70%);
  background-color: #0b0c0e;
}

.container{ width: min(760px, 92%); margin: 0 auto; padding: 28px 0 40px; }

.header { text-align: center; margin: 8px 0 12px; }
.logo{ width: min(88%, 680px); height: auto; border-radius: 14px; box-shadow: 0 1px 0 var(--stroke); }

.section{ margin: 22px 0 10px; }
.section h2{ margin: 8px 0 16px; font-size: 18px; font-weight: 800; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; text-align: center; }

.cards{ display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.cards--grid2{ grid-template-columns: repeat(2, 1fr); }

.card{
  display: grid; place-items: center; text-align: center;
  padding: 16px 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  text-decoration: none; color: var(--text);
  transition: transform .12s ease, border-color .12s ease, opacity .12s ease;
  backdrop-filter: blur(4px);
}
.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.16); opacity: .98; }

.avatar{
  width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--stroke); box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  margin-bottom: 8px;
}
.card h3{ margin: 4px 0 2px; font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.card .sub{ margin: 0; font-size: 13px; color: var(--muted); }

.footer{ margin-top: 26px; text-align: center; color: var(--muted); font-size: 14px; }

/* Responsive */
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .cards--grid2{ grid-template-columns: 1fr; }
  .avatar{ width: 76px; height: 76px; }
}


.catalog-title{
  color: #C22222;
  text-shadow: 0 0 8px rgba(194,34,34,0.7);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 16px;
}
.white-sub{ color: #ffffff !important; }