:root{
  --asfalto:#070809; --asfalto2:#111316; --papel:#0b0d10; --blanco:#f4f5f7; --tinta:#eceef2; --tenue:#9ba3af;
  --linea:#292d34; --amarillo:#ff3434; --azul:#ff4b4b; --rojo:#d92735; --verde:#20b879; --dc:#5865f2;
  --disp:"Archivo","Arial Narrow",system-ui,sans-serif; --txt:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}

html {
  scroll-behavior: smooth;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% -20%, #1b0b0d 0, transparent 55%), var(--papel);
  color: var(--tinta);
  font: 400 16px/1.6 var(--txt);
  -webkit-font-smoothing: antialiased;
}

a{color:#ff6262;text-decoration:none} a:hover{color:#fff;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amarillo);color:var(--asfalto);padding:8px 14px;border-radius:6px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--disp);font-stretch:112%;font-weight:800;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;color:#fff}
h1{font-size:clamp(30px,5vw,44px);margin-top:36px} h2{font-size:22px;margin-top:2em} h3{font-size:16px;font-stretch:100%}
code{background:#101216;color:#f4f5f7;padding:2px 7px;border-radius:5px;border:1px solid #363c46;font-size:.92em}
.mut{color:var(--tenue)} .small{font-size:14px} small{font-size:.85em}
main {
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
  padding-bottom: 64px;
}

/* Cabecera optimizada con capas correctas */
.top{background:#050506;position:sticky;top:0;z-index:3000;border-bottom:1px solid rgba(255,255,255,0.04)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:64px;position:relative}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3002;
}

.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 20px/1 var(--disp);font-stretch:122%}
.logo small{font-size:12px;font-weight:600;font-stretch:100%;color:#AEB5C6;margin-left:-2px}
.mark{width:5px;height:24px;background:repeating-linear-gradient(#ff3434 0 7px,transparent 7px 11px)}

.acct{display:flex;align-items:center;gap:6px;margin-left:auto}
.acct a{color:#C9CFDD;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:500;font-size:15px;white-space:nowrap;transition:background 0.2s, color 0.2s}
.acct a:hover{color:#fff;background:var(--asfalto2)}
.acct .btn{margin-left:4px}

/* Botón Hamburguesa Animado */
.menu-toggle {
  display: flex !important;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 6px;
  padding: 0;
  z-index: 3003;
  border-radius: 8px;
  transition: background 0.2s;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #f4f5f7;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  width: 24px;
}

.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  width: 24px;
}

/* Menú Lateral Optimizado y Fluido (Sidebar con transición ligera) */
.top nav {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  height: 100vh;
  background: rgba(11, 13, 16, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-direction: column;
  padding: 85px 16px 20px 16px;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  gap: 4px;
  z-index: 2500;
  transform: translateZ(0);
  will-change: transform, opacity;
  transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out, visibility 0.25s ease-in-out;
}

.top nav.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateX(300px);
}

.top nav a {
  color: #aeb5c6;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}

.top nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.top nav a[aria-current] {
  color: #ffffff;
  background: linear-gradient(135deg, #e92735, #b81d28);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(233, 39, 53, 0.3);
}

.top nav a .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: inherit;
  opacity: 0.8;
}

.top nav a:hover .nav-icon,
.top nav a[aria-current] .nav-icon {
  opacity: 1;
}

/* Fondo oscuro translúcido */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  z-index: 2000;
  will-change: opacity, visibility;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.menu-open::after {
  opacity: 1;
  visibility: visible;
}

/* Botones generales */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#e92735;color:#fff!important;font:700 15px/1 var(--txt);padding:13px 20px;border-radius:8px;border:2px solid #e92735;text-decoration:none;cursor:pointer;box-shadow:0 5px 18px rgba(233,39,53,0.15);transition:all 0.25s ease}
.btn:hover{background:#ff3c49;border-color:#ff3c49}
.btn.sm{padding:9px 14px;font-size:14px}
.btn.dark{background:#202329;border-color:#343943;color:#fff!important;box-shadow:none} .btn.dark:hover{background:#2b3038}
.btn.danger{background:var(--rojo);border-color:var(--rojo);color:#fff!important}
.btn.ghost{background:transparent;border-color:#5A6277;color:#fff!important} .btn.ghost:hover{border-color:#fff;background:transparent}
.btn.ghost-d{background:transparent;border-color:#3b414b;color:#e9ebef!important} .btn.ghost-d:hover{border-color:#fff;background:#181b20}
.btn.dc{background:var(--dc);border-color:var(--dc);color:#fff!important;width:100%;text-align:center;padding:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
button.link{background:none;border:0;color:#ff6262;font:inherit;padding:0;cursor:pointer;text-decoration:underline} button.link.red{color:var(--rojo)}

/* Hero */
.hero{position:relative;background:#050506;color:#fff;overflow:hidden}
.hero-map{position:absolute;inset:0;width:100%;height:100%;opacity:.25}
.hero-in{position:relative;padding-top:72px;padding-bottom:64px}
.hero h1{font-size:clamp(40px,8vw,76px);font-stretch:125%;margin:0 0 18px;letter-spacing:-.02em}
.lead{font-size:clamp(17px,2.2vw,20px);max-width:560px;color:#D5DAE6;margin:0 0 28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ipbox{display:flex;align-items:center;gap:14px;background:#101216;border:2px solid #333842;color:#fff;border-radius:8px;padding:11px 14px 11px 18px;font:600 15px/1 var(--txt);cursor:pointer}
.ipbox b{background:#f4f5f7;color:#111;font-size:12px;padding:5px 9px;border-radius:5px}
.ipbox:hover{border-color:#8A93AB}
.roadline{position:relative;height:6px;background:repeating-linear-gradient(90deg,#ff3434 0 30px,transparent 30px 52px)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#8A93AB;margin-right:7px}
.dot.on{background:#20b879;box-shadow:0 0 10px #20b879}

/* Secciones y listas */
.home{display:grid;grid-template-columns:2fr 1fr;gap:36px;margin-top:40px;margin-bottom:60px}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
@media(max-width:900px){.home,.two{grid-template-columns:1fr;gap:20px}}

.home section {
  background: rgba(18, 20, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:12px}
.sec-h h2{font-size:18px;font-family:var(--disp);color:#fff;margin:0;letter-spacing:0.5px}
.sec-h a{font-size:13px;color:#e92735;font-weight:600;text-decoration:none;transition:opacity 0.2s}
.sec-h a:hover{opacity:0.85;text-decoration:underline}

.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;border-top:0}
.rows li{background:rgba(255, 255, 255, 0.02);border:1px solid rgba(255, 255, 255, 0.04);border-radius:10px;display:flex;align-items:center;gap:14px;transition:all 0.25s ease}
.rows li:hover{background:rgba(255, 255, 255, 0.05);border-color:rgba(255, 255, 255, 0.12);transform:translateX(4px)}
.row-link{display:flex;align-items:center;flex:1;gap:14px;padding:12px 16px;color:inherit;text-decoration:none;min-width:0}
.rows.tight .row-link{padding:9px 12px}
.rows.big .row-link,.rows.big li.prod{padding-top:14px;padding-bottom:14px}
.grow{flex:1;min-width:0;display:flex;flex-direction:column}
.row-link strong{color:#fff;font-size:14px;font-weight:600}
.rows .grow small{display:block}
.rank{counter-reset:r} .rank li{counter-increment:r} .rank .row-link::before{content:counter(r);width:26px;color:var(--tenue);font-weight:600}
.banda-row{border-left:5px solid var(--c);padding-right:8px}
.banda-row .row-link{padding-left:14px}
.prod{padding:0 4px} .price{font:700 18px var(--disp);white-space:nowrap;color:#fff}
.bl{border-radius:10px;object-fit:contain;background:#17191e;flex:none;border:1px solid #333842}
.bl.ini{display:grid;place-items:center;background:var(--c);color:#fff;font-family:var(--disp);font-weight:800;border:0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.chips{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:#121418;border:1px solid #30353e;border-radius:999px;padding:5px 13px;font-size:14px;color:var(--tinta)}
.chips a{text-decoration:none;color:inherit} .sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:7px}
.legend{margin-top:16px}

/* Banda */
.banda-head{background:#050506;color:#fff;border-left:10px solid var(--c);margin-bottom:12px}
.bh-in{display:flex;align-items:center;gap:22px;padding-top:30px;padding-bottom:30px;flex-wrap:wrap}
.banda-head h1{margin:0 0 6px;font-size:clamp(28px,5vw,40px)} .banda-head .mut{color:#AEB5C6;margin:0}
.banda-head .bl{border:0} .desc{margin:10px 0 0;max-width:560px;color:#D5DAE6}
.pvrow{display:flex;align-items:center;gap:14px;margin-bottom:6px}

/* Estadísticas */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin:22px 0}
.stats>div{border-top:3px solid #3a2024;padding-top:8px}
.stats dt{font-size:13px;color:var(--tenue)} .stats dd{margin:2px 0 0;font:800 22px/1.2 var(--disp);color:#f4f5f7}
.note{background:#121418;border-left:4px solid #e92735;padding:12px 16px;border-radius:0 8px 8px 0;margin:18px 0;border-top:1px solid #2b3038;border-right:1px solid #2b3038;border-bottom:1px solid #2b3038}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 18px}
.tabs a{padding:8px 14px;border-radius:999px;text-decoration:none;color:#d5d8df;border:1px solid #343943;background:#121418;font-weight:500}
.tabs a[aria-current]{background:#d92735;color:#fff;border-color:#d92735}
.steps{padding-left:22px} .steps li{margin:0 0 12px;padding-left:6px} .bullets li{margin-bottom:6px}
.map{width:100%;max-width:760px;height:auto;display:block;border-radius:12px;margin:12px 0}

/* Formularios */
.form{display:grid;gap:16px;margin:18px 0}
.form.row{grid-template-columns:1fr auto;max-width:520px}
label{display:grid;gap:6px;font-weight:600;font-size:15px;color:#fff}
label small{font-weight:400}
input,select,textarea{font:inherit;padding:11px 13px;border:1.5px solid #363c46;border-radius:8px;background:#101216;color:#f2f3f6;color-scheme:dark;width:100%}
input[type=file]{padding:9px}
input::placeholder,textarea::placeholder{color:#7f8793}
input:focus,select:focus,textarea:focus{border-color:#f04450;outline:3px solid rgba(240, 68, 80, 0.2);outline-offset:0}
label.chk{display:flex;gap:8px;align-items:center;font-weight:500} label.chk input{width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:600px){.grid2,.form.row{grid-template-columns:1fr}}
.alert{padding:12px 16px;border-radius:8px;margin:18px 0 0;font-weight:500}
.alert.ok{background:#10281e;color:#9bf0c5} .alert.err{background:#321417;color:#ffb5ba}
.or{display:flex;align-items:center;gap:12px;color:#9ba3af;font-size:14px;margin:22px 0 4px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#30343c}

/* Panel */
.subnav{background:#121418;border-bottom:1px solid #292d34}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto}
.subnav a{padding:14px 14px 12px;text-decoration:none;color:#aeb4bf;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.subnav a:hover{color:#fff} .subnav a[aria-current]{color:#fff;border-color:#ff3434}
.tbl{overflow-x:auto;background:#101216;border:1px solid #2c3038;border-radius:10px;margin:12px 0 24px}
table{border-collapse:collapse;width:100%;font-size:14.5px;color:#e9ebef}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid #2a2e36;vertical-align:top}
th{font-size:13px;color:#aeb4bf;font-weight:600;background:#171a20} tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(255,255,255,0.02)}
td form{display:inline;margin:0} .acts{white-space:nowrap} .acts form,.acts a{margin-right:10px}
.tag{display:inline-block;background:#282d35;color:#e4e7ed;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600}
.tag.red{background:#3a171b;color:#ffadb3} .tag.green{background:#103123;color:#9bf0c5}
.acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:12px}
.box{background:#121418;border:1px solid #2b3038;border-radius:10px;padding:16px;margin:0;align-content:start;color:var(--tinta)}
.box h3{margin:0;color:#fff}

footer{background:#050506;color:#aab0bb;padding:22px 0;font-size:14px;flex-shrink:0;width:100%;border-top:1px solid #24272d}
footer a{color:#e0e3e9;margin-left:14px} .fbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
::selection{background:#d92735;color:#fff}

/* Estructura en dos columnas para el Hero */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media(max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
}

.hero-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.hero-badges .badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: #c9cfdd;
}

/* Tarjeta de Estado del Servidor */
.server-status-card {
  background: rgba(15, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.ssc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
}
.ssc-title { color: #9ba3af; font-weight: 600; }
.ssc-badge.live {
  background: rgba(233, 39, 53, 0.15);
  color: #ff4b4b;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(233, 39, 53, 0.3);
}

.ssc-banner {
  background: linear-gradient(135deg, #12151c, #1a1e29);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.ssc-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ssc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7f8793;
}
.ssc-dot.on { background: #20b879; box-shadow: 0 0 10px #20b879; }
.ssc-state-text { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.ssc-version { font-size: 12px; color: #9ba3af; margin-left: 6px; }

.ssc-banner h3 { font-size: 16px; margin: 0 0 4px; color: #fff; }
.ssc-ip { font-size: 13px; color: #9ba3af; margin: 0; font-family: monospace; }

.ssc-players-counter {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
}
.ssc-players-counter b { display: block; font-size: 20px; color: #fff; line-height: 1; }
.ssc-players-counter small { font-size: 11px; color: #9ba3af; }

.ssc-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.ssc-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 10px 14px;
  border-radius: 10px;
}
.ssc-label { display: block; font-size: 11px; color: #9ba3af; margin-bottom: 2px; }
.ssc-box strong { font-size: 13px; color: #f4f5f7; font-family: monospace; }

.ssc-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 10px;
  color: #f4f5f7;
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.ssc-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.ssc-action-btn.copy-btn {
  color: #c9cfdd;
}

.ssc-action-btn.play-btn {
  background: linear-gradient(135deg, #e92735, #b81d28);
  border-color: #e92735;
  color: #fff;
  box-shadow: 0 4px 15px rgba(233, 39, 53, 0.3);
}

.ssc-action-btn.play-btn:hover {
  background: linear-gradient(135deg, #ff3c49, #d92735);
  border-color: #ff3c49;
  box-shadow: 0 6px 20px rgba(233, 39, 53, 0.5);
}

/* Estadísticas del Hero horizontales */
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 16px;
  margin-top: 36px;
  align-items: center;
}

.stat-card {
  background: rgba(18, 20, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  padding: 12px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.stat-card .dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 10px currentColor;
}

.stat-icon {
  font-size: 18px;
  line-height: 1;
}

.stat-card b {
  display: block;
  font-size: 18px;
  color: #fff;
  font-family: var(--disp);
  line-height: 1.1;
}

.stat-card span {
  display: block;
  font-size: 12px;
  color: var(--tenue);
  font-weight: 500;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .hero-stats-grid {
    grid-template-columns: 1fr;
  }
}
/* Alineación de iconos en la sección de cuenta/enlaces superiores */
.acct a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acct a svg {
  opacity: 0.75;
  transition: opacity 0.2s;
}
.acct a:hover svg {
  opacity: 1;
}
.phase{width:100%;height:8px;accent-color:var(--acc,#c9a227)}

.mapa{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.mapa .lista{max-height:640px;overflow:auto}
.mapa-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 14px}.mapa-tools label{display:flex;gap:6px;align-items:center}
.zona{stroke:#0e1730;stroke-width:.8;fill-opacity:.85;fill:#566a8c}.zona.ls{fill:#d98c3f}.zona.sf{fill:#5b8fd6}.zona.lv{fill:#c85a7c}.zona.hit{stroke:#fff;stroke-width:16;fill-opacity:1}
.terr{cursor:pointer}.list button.t{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;width:100%}.list button.t:focus-visible{outline:2px solid #6B8AE6}
@media(max-width:820px){.mapa{grid-template-columns:1fr}}

.skin{float:right;height:220px;width:auto;margin:0 0 12px 16px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:top;background:#1b1f27;flex:none;margin-right:10px}
.crea{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.crea article{display:flex;gap:12px;align-items:center}.crea .av{width:56px;height:56px}

/* Galería de bandas */
.gal{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gal li{display:grid;gap:6px;align-content:start}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid #2b3038;background:#17191e;display:block}
.gal form{margin:0}


/* Redes de creadores (icono + nombre) */
.socs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.soc{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 11px;border-radius:10px;background:#1a1d23;border:1px solid #30353e;color:#e4e7ed;font-size:14px;font-weight:600;line-height:1;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.soc svg{flex:none}
.soc:hover{color:#fff;border-color:currentColor;text-decoration:none}
.soc-twitch:hover{background:#9146ff;border-color:#9146ff}
.soc-youtube:hover{background:#ff0033;border-color:#ff0033}
.soc-tiktok:hover{background:#fe2c55;border-color:#fe2c55}
.soc-kick:hover{background:#53fc18;border-color:#53fc18;color:#0b0d10}

/* ===== Menú lateral v3 ===== */
.top nav{width:320px;left:-340px;padding:88px 18px 28px;gap:2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2a2f39 transparent;background:linear-gradient(180deg,rgba(14,16,20,.98),rgba(8,9,11,.98))}
.top nav.is-active{transform:translateX(340px)}
.top nav .nav-group{margin:24px 8px 10px;font:600 10.5px/1 "Public Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#6b7383;display:flex;align-items:center;gap:12px}
.top nav .nav-group:first-child{margin-top:0}
.top nav .nav-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}
.top nav a{position:relative;display:flex;align-items:center;gap:14px;padding:10px 12px;margin:0 0 4px;border-radius:14px;border:1px solid transparent;color:#c9cfdc;text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
.top nav a:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);transform:translateX(3px);color:#fff}
.top nav a .nav-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#aeb5c6;opacity:1;transition:background .18s,border-color .18s,color .18s,box-shadow .18s}
.top nav a:hover .nav-icon{color:#fff;background:rgba(233,39,53,.16);border-color:rgba(233,39,53,.4)}
.top nav .nav-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.top nav .nav-text b{font:600 14.5px/1.2 "Public Sans",sans-serif;color:inherit}
.top nav .nav-text small{font:400 12px/1.2 "Public Sans",sans-serif;color:#7d8596;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top nav a[aria-current]{background:linear-gradient(135deg,rgba(233,39,53,.2),rgba(233,39,53,.04));border-color:rgba(233,39,53,.32);box-shadow:none;color:#fff;transform:none}
.top nav a[aria-current]::before{content:"";position:absolute;left:-19px;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:#e92735}
.top nav a[aria-current] .nav-icon{background:#e92735;border-color:#e92735;color:#fff;box-shadow:0 6px 16px rgba(233,39,53,.35)}
.top nav a[aria-current] small{color:#f0a7ad}
.top nav .nav-cta{margin-top:24px;justify-content:center;padding:14px;background:#5865f2;border-color:#5865f2;color:#fff;box-shadow:0 8px 22px rgba(88,101,242,.35)}
.top nav .nav-cta:hover{background:#4752c4;border-color:#4752c4;transform:none}
.top nav.is-active a{animation:navIn .34s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*30ms)}
@keyframes navIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (max-width:420px){.top nav{width:min(88vw,320px);left:calc(-1*min(88vw,320px) - 20px)}.top nav.is-active{transform:translateX(calc(min(88vw,320px) + 20px))}}
@media (prefers-reduced-motion:reduce){.top nav.is-active a{animation:none}.top nav a,.top nav a .nav-icon{transition:none}}

/* ===== Insignias VIP (BASICO / PLUS / Colven+) ===== */
.vip{
  --vip-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.8-6.3 3.8 1.7-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 11px 2px 8px;border-radius:999px;
  font:700 12px/1.6 var(--txt);letter-spacing:.07em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap;
  border:1px solid currentColor;background:rgba(255,255,255,.04);
}
.vip::before{
  content:"";flex:none;width:13px;height:13px;background:currentColor;
  -webkit-mask:var(--vip-ico) center/contain no-repeat;
          mask:var(--vip-ico) center/contain no-repeat;
}
.vip-1{color:#c4cad6}
.vip-2{color:#f0b429;background:rgba(240,180,41,.08)}
 
/* Colven+ : insignia dorada con corona, borde degradado y brillo */
.vip-3{
  --vip-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 19h18v2H3zM3 7l4.6 4.2L12 3l4.4 8.2L21 7l-2 10H5z'/%3E%3C/svg%3E");
  color:#ffd54a;border:1px solid transparent;
  background:
    linear-gradient(#17120a,#17120a) padding-box,
    linear-gradient(120deg,#ffe9a3,#f0a81a 50%,#ffe9a3) border-box;
  box-shadow:0 0 14px rgba(255,196,60,.32);
  text-shadow:0 0 8px rgba(255,200,60,.45);
}
 

/* ===== Insignias de rango (Ciudadano ... CEO) ===== */
.rango{
  --c:#aeb5c6;--ico:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 11px 2px 8px;border-radius:999px;
  font:700 12px/1.6 var(--txt);letter-spacing:.07em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap;
  color:var(--c);border:1px solid var(--c);
  background:color-mix(in srgb,var(--c) 9%,transparent);
}
.rango::before{
  content:"";flex:none;width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
/* 0 Ciudadano: documento de identidad */
.rango-0{--c:#aeb5c6;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222.5%22 y=%225%22 width=%2219%22 height=%2214%22 rx=%222.5%22/%3E%3Ccircle cx=%228.5%22 cy=%2211%22 r=%222%22/%3E%3Cpath d=%22M5.5 16c.4-1.6 1.6-2.3 3-2.3s2.6.7 3 2.3M14 10h5M14 14h4%22/%3E%3C/svg%3E")}
/* 1 Ayudante: salvavidas (soporte) */
.rango-1{--c:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.6%22/%3E%3Cpath d=%22M5.6 5.6l3.9 3.9M14.5 14.5l3.9 3.9M18.4 5.6l-3.9 3.9M9.5 14.5l-3.9 3.9%22/%3E%3C/svg%3E")}
/* 2 Moderador: escudo con check */
.rango-2{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.5l8 3v6c0 5-3.4 8.8-8 10-4.6-1.2-8-5-8-10v-6z%22/%3E%3Cpath d=%22M8.6 12l2.4 2.4 4.4-4.8%22/%3E%3C/svg%3E")}
/* 3 Moderador Global: escudo con globo */
.rango-3{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.5l8 3v6c0 5-3.4 8.8-8 10-4.6-1.2-8-5-8-10v-6z%22/%3E%3Cpath d=%22M8.5 11.5h7M12 7.2c-2 2.6-2 6.4 0 9.2M12 7.2c2 2.6 2 6.4 0 9.2%22/%3E%3C/svg%3E")}
/* 4 Operador: auriculares */
.rango-4{--c:#2dd4bf;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 14v-2a8 8 0 0 1 16 0v2%22/%3E%3Crect x=%223%22 y=%2214%22 width=%224%22 height=%226%22 rx=%221.5%22/%3E%3Crect x=%2217%22 y=%2214%22 width=%224%22 height=%226%22 rx=%221.5%22/%3E%3Cpath d=%22M19 20c0 1.5-2 2-5 2%22/%3E%3C/svg%3E")}
/* 5 Operador Global: torre de radio */
.rango-5{--c:#2dd4bf;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%221.6%22/%3E%3Cpath d=%22M12 12v10M8.5 22l3.5-6 3.5 6M7.6 6.6a6 6 0 0 0 0 6.8M16.4 6.6a6 6 0 0 1 0 6.8M4.8 4a10 10 0 0 0 0 12M19.2 4a10 10 0 0 1 0 12%22/%3E%3C/svg%3E")}
/* 6 Administrador: llave */
.rango-6{--c:#a78bfa;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2215.5%22 r=%224.5%22/%3E%3Cpath d=%22M10.7 12.3L21 2M17 6l3 3M14 9l2.5 2.5%22/%3E%3C/svg%3E")}
/* 7 Administrador Global: servidor */
.rango-7{--c:#a78bfa;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223.5%22 width=%2218%22 height=%227%22 rx=%222%22/%3E%3Crect x=%223%22 y=%2213.5%22 width=%2218%22 height=%227%22 rx=%222%22/%3E%3Cpath d=%22M7 7h.01M7 17h.01M12 7h6M12 17h6%22/%3E%3C/svg%3E")}
/* 8 Sub Ceo: estrella de mando */
.rango-8{--c:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229.5%22/%3E%3Cpath d=%22M12 6.2l1.7 3.6 3.9.4-2.9 2.6.8 3.9L12 14.8 8.5 16.7l.8-3.9-2.9-2.6 3.9-.4z%22/%3E%3C/svg%3E")}
/* 9 CEO: corona con joyas */
.rango-9{--c:#ff5a5f;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22black%22%3E%3Cpath d=%22M3 19h18v2.2H3zM2.5 7.5l5 4.2L12 3l4.5 8.7 5-4.2-2.2 10H4.7z%22/%3E%3Ccircle cx=%222.5%22 cy=%226.2%22 r=%221.7%22/%3E%3Ccircle cx=%2212%22 cy=%222.6%22 r=%221.7%22/%3E%3Ccircle cx=%2221.5%22 cy=%226.2%22 r=%221.7%22/%3E%3C/svg%3E")}
/* Los "Global" van mas intensos y con brillo */
.rango-3,.rango-5,.rango-7{
  background:color-mix(in srgb,var(--c) 20%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--c) 40%,transparent);
}
/* Sub Ceo */
.rango-8{
  border-color:transparent;
  background:linear-gradient(#1a1008,#1a1008) padding-box,
             linear-gradient(120deg,#ffc58a,#ff7a1a 50%,#ffc58a) border-box;
  box-shadow:0 0 14px rgba(255,140,50,.35);text-shadow:0 0 8px rgba(255,140,50,.45);
}
/* CEO */
.rango-9{
  color:#ffb3b3;border-color:transparent;
  background:linear-gradient(#1c0a0c,#1c0a0c) padding-box,
             linear-gradient(120deg,#ff8f8f,#e92735 50%,#ff8f8f) border-box;
  box-shadow:0 0 18px rgba(233,39,53,.5);text-shadow:0 0 9px rgba(255,80,90,.6);
}

/* ===== Iconos de estadisticas y titulos ===== */
.ico{
  --ic:currentColor;--ico:none;
  display:inline-block;flex:none;width:1.05em;height:1.05em;
  margin-right:.45em;vertical-align:-.16em;
  background:var(--ic);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.stats dt .ico{width:15px;height:15px;margin-right:7px;vertical-align:-3px}
h2 .ico{width:.9em;height:.9em;margin-right:.5em;vertical-align:-.1em}
.ico-nivel{--ic:#a78bfa;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 7l-8.5 8.5-5-5L2 17%22/%3E%3Cpath d=%22M16 7h6v6%22/%3E%3C/svg%3E")}
.ico-horas{--ic:#9fb0c8;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E")}
.ico-efectivo{--ic:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%226%22 width=%2220%22 height=%2212%22 rx=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.6%22/%3E%3Cpath d=%22M6 12h.01M18 12h.01%22/%3E%3C/svg%3E")}
.ico-banco{--ic:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 10l9-6 9 6%22/%3E%3Cpath d=%22M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18%22/%3E%3C/svg%3E")}
.ico-oros{--ic:#ffd54a;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225.2%22/%3E%3Cpath d=%22M12 9.6v4.8%22/%3E%3C/svg%3E")}
.ico-vehiculos{--ic:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 15l1.8-6A2 2 0 0 1 6.7 7.5h10.6a2 2 0 0 1 1.9 1.5L21 15v3H3z%22/%3E%3Ccircle cx=%227.5%22 cy=%2218%22 r=%221.8%22/%3E%3Ccircle cx=%2216.5%22 cy=%2218%22 r=%221.8%22/%3E%3Cpath d=%22M3 12h18%22/%3E%3C/svg%3E")}
.ico-banda{--ic:#ff5a5f;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223.2%22/%3E%3Cpath d=%22M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5%22/%3E%3Ccircle cx=%2217%22 cy=%229%22 r=%222.4%22/%3E%3Cpath d=%22M17.5 14.5c2.2.3 3.8 2 3.8 4.5%22/%3E%3C/svg%3E")}
.ico-casa{--ic:#ffa94d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11l9-8 9 8%22/%3E%3Cpath d=%22M5 10v10h14V10%22/%3E%3Cpath d=%22M10 20v-6h4v6%22/%3E%3C/svg%3E")}
.ico-trabajo{--ic:#2dd4bf;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%227%22 width=%2218%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18%22/%3E%3C/svg%3E")}
.ico-sancion{--ic:#ff7a85;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l10 18H2z%22/%3E%3Cpath d=%22M12 10v5M12 18h.01%22/%3E%3C/svg%3E")}

/* ===== Insignias de trabajos ===== */
.trabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.trab{
  --c:#9fb0c8;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%227%22 width=%2218%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18%22/%3E%3C/svg%3E");
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 12px 4px 9px;border-radius:10px;
  font:600 13.5px/1.3 var(--txt);color:#eceef2;white-space:nowrap;
  background:color-mix(in srgb,var(--c) 12%,#0f1115);
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
}
.trab::before{
  content:"";flex:none;width:16px;height:16px;background:var(--c);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.trab small{font-size:11.5px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);padding:1px 7px;border-radius:999px}
.trab-1{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 15l1.8-6A2 2 0 0 1 6.7 7.5h10.6a2 2 0 0 1 1.9 1.5L21 15v3H3z%22/%3E%3Ccircle cx=%227.5%22 cy=%2218%22 r=%221.8%22/%3E%3Ccircle cx=%2216.5%22 cy=%2218%22 r=%221.8%22/%3E%3Cpath d=%22M9.5 4h5v3.5h-5z%22/%3E%3C/svg%3E")} /* Taxista */
.trab-2{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 6h11v10H2z%22/%3E%3Cpath d=%22M13 9h4l4 4v3h-8z%22/%3E%3Ccircle cx=%226.5%22 cy=%2217.5%22 r=%221.8%22/%3E%3Ccircle cx=%2217.5%22 cy=%2217.5%22 r=%221.8%22/%3E%3C/svg%3E")} /* Camionero */
.trab-3{--c:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z%22/%3E%3C/svg%3E")} /* Mecanico */
.trab-4{--c:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22V8%22/%3E%3Cpath d=%22M12 8c-2.5 0-4-1.5-4-4 2.5 0 4 1.5 4 4zM12 8c2.5 0 4-1.5 4-4-2.5 0-4 1.5-4 4zM12 13c-2.5 0-4-1.5-4-4 2.5 0 4 1.5 4 4zM12 13c2.5 0 4-1.5 4-4-2.5 0-4 1.5-4 4zM12 18c-2.5 0-4-1.5-4-4 2.5 0 4 1.5 4 4zM12 18c2.5 0 4-1.5 4-4-2.5 0-4 1.5-4 4z%22/%3E%3C/svg%3E")} /* Cosechador */
.trab-5{--c:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%2210%22 width=%228%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M9 10V7h4v3M11 7V4h3.5M18 3.5h.01M20.5 6h.01M18.5 8.5h.01%22/%3E%3C/svg%3E")} /* Fumigador */
.trab-6{--c:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15M10 10v7M14 10v7%22/%3E%3C/svg%3E")} /* Basurero */
.trab-7{--c:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3.5c3.5 0 6 2 7 5l-4.5 2-5-5z%22/%3E%3Cpath d=%22M12 8.5L3 21%22/%3E%3C/svg%3E")} /* Lenador */
.trab-8{--c:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22V12%22/%3E%3Cpath d=%22M12 12c0-4 3-7 8-7 0 4-3 7-8 7zM12 16c0-3-2.5-5.5-7-5.5 0 3.5 2.5 5.5 7 5.5z%22/%3E%3C/svg%3E")} /* Agricultor */
.trab-9{--c:#5b8cff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.5l8 3v6c0 5-3.4 8.8-8 10-4.6-1.2-8-5-8-10v-6z%22/%3E%3Cpath d=%22M12 8l1.2 2.6 2.8.3-2.1 1.9.6 2.8-2.5-1.5-2.5 1.5.6-2.8L8 10.9l2.8-.3z%22/%3E%3C/svg%3E")} /* Policia */
.trab-10{--c:#ffb84d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22L3 6a15 15 0 0 1 18 0z%22/%3E%3Ccircle cx=%2210%22 cy=%229%22 r=%22.8%22/%3E%3Ccircle cx=%2214%22 cy=%2211%22 r=%22.8%22/%3E%3Ccircle cx=%2212%22 cy=%2215%22 r=%22.8%22/%3E%3C/svg%3E")} /* Pizzero */
.trab-11{--c:#ff5a6e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%223.5%22/%3E%3Cpath d=%22M12 7.5v9M7.5 12h9%22/%3E%3C/svg%3E")} /* Medico */
.trab-12{--c:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 8l-9-5-9 5v8l9 5 9-5z%22/%3E%3Cpath d=%22M3 8l9 5 9-5M12 13v8%22/%3E%3C/svg%3E")} /* Almacen */
.trab-13{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 9h14l-1 12H6z%22/%3E%3Cpath d=%22M9 9V6a3 3 0 0 1 6 0v3%22/%3E%3C/svg%3E")} /* Repartidor */
.trab-14{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M1 7h16v9H1z%22/%3E%3Cpath d=%22M17 10h3l3 3v3h-6z%22/%3E%3Ccircle cx=%225%22 cy=%2217.5%22 r=%221.7%22/%3E%3Ccircle cx=%2211%22 cy=%2217.5%22 r=%221.7%22/%3E%3Ccircle cx=%2219%22 cy=%2217.5%22 r=%221.7%22/%3E%3C/svg%3E")} /* Transportista */
.trab-15{--c:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 9C6 5 13 3.5 20.5 6.5%22/%3E%3Cpath d=%22M12 5l-6.5 16%22/%3E%3C/svg%3E")} /* Minero */
.trab-16{--c:#c0455f;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22/%3E%3Cpath d=%22M12 2v4M12 18v4M2 12h4M18 12h4%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%22.9%22/%3E%3C/svg%3E")} /* Armero */
.trab-17{--c:#4da3ff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2214%22 rx=%223%22/%3E%3Cpath d=%22M3 11h18M7 18v2.5M17 18v2.5M7 14.5h.01M17 14.5h.01%22/%3E%3C/svg%3E")} /* Chofer de Buses */
.trab-18{--c:#ff9d4d;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3l-3.5 8%22/%3E%3Cpath d=%22M6 12h12l2 9H4z%22/%3E%3C/svg%3E")} /* Limpia Calles */
.trab-19{--c:#b0b8c8;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%227%22 cy=%2214%22 r=%223.5%22/%3E%3Ccircle cx=%2217%22 cy=%2214%22 r=%223.5%22/%3E%3Cpath d=%22M10.5 14h3M3.5 14L2 8.5M20.5 14L22 8.5%22/%3E%3C/svg%3E")} /* Guardaespalda */
.trab-20{--c:#3ecf8e;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 19C5 10 10 5 20 4c0 10-4 15-13 15z%22/%3E%3Cpath d=%22M5 19l8-8%22/%3E%3C/svg%3E")} /* Jardinero */
.trab-21{--c:#8fbf5a;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 8l7-5 7 5M5 14l7-5 7 5M5 20l7-5 7 5%22/%3E%3C/svg%3E")} /* Ejercito */
.trab-22{--c:#8e9bff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22M21 21l-5-5%22/%3E%3C/svg%3E")} /* FBI */
.trab-23{--c:#f0c040;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%227%22 width=%2220%22 height=%2214%22 rx=%222.5%22/%3E%3Cpath d=%22M8 2.5L12 7l4-4.5%22/%3E%3C/svg%3E")} /* RCN */
.trab-24{--c:#b05cff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.5 20.5a5 5 0 0 1-7-7l9-9a5 5 0 0 1 7 7z%22/%3E%3Cpath d=%22M8.5 8.5l7 7%22/%3E%3C/svg%3E")} /* Traficante */
.trab-25{--c:#ff6b6b;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%224%22 width=%2212%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M9 9H3v3h6%22/%3E%3Cpath d=%22M16 17v4M12 17v4%22/%3E%3C/svg%3E")} /* Carnicero */