/* ── Portal Odín — estilos aditivos (no reemplazan nada) ── */
@keyframes odinEntrada{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes negocioEntrada{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes odinLoaderIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes odinLoaderOut{from{opacity:1}to{opacity:0;transform:scale(1.06)}}
@keyframes runaFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.06) translateY(-4px)}}
@keyframes cardAppear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotPulse{0%,100%{transform:scale(1);background:var(--border2)}50%{transform:scale(1.4);background:var(--red)}}

/* Runa ⚡ */
#odinRuna{font-size:52px;display:block;text-align:center;margin:0 auto 6px;animation:runaFloat 3s ease-in-out infinite;user-select:none;cursor:default}

/* Grupos de negocios en el grid */
.odin-grupo{margin-bottom:26px}
.odin-grupo-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0 2px;display:flex;align-items:center;gap:6px}
.odin-grupo-label img{width:18px;height:18px;object-fit:contain}
.odin-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px}

/* Tarjeta de negocio — fondo claro, borde color de marca */
.odin-biz-card{
  background:var(--surface);border-radius:14px;
  border:1.5px solid var(--border);
  padding:16px 10px 12px;text-align:center;cursor:pointer;
  position:relative;overflow:hidden;
  transition:border-color .2s,transform .15s,box-shadow .2s;
  animation:cardAppear .4s ease both;
}
.odin-biz-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--card-color,var(--red));border-radius:14px 14px 0 0;
}
.odin-biz-card:hover{border-color:var(--card-color,var(--red));transform:translateY(-3px);box-shadow:var(--sh)}
.odin-biz-card:active{transform:scale(.97)}
.odin-card-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--card-color,var(--red)) 0%,transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.odin-biz-card:hover .odin-card-glow{opacity:.04}
.odin-card-icon{margin-bottom:8px;display:flex;align-items:center;justify-content:center;height:50px}
.odin-card-fluent{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.odin-biz-card:hover .odin-card-fluent{transform:scale(1.18) rotate(-6deg)}
.odin-card-emoji{font-size:32px;line-height:1}
.odin-card-name{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:5px}
.odin-card-count{font-size:10px;color:var(--card-color,var(--red));font-weight:600;background:var(--s2);border-radius:100px;padding:2px 8px;display:inline-block}


/* ══════════════════════════════════════════════════════
   TIRAS DE GRUPOS — estilo referencia (gradiente + badge)
   ══════════════════════════════════════════════════════ */
.odin-tiras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 6px;
  width: 100%;
}
.odin-tira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 13px 16px 13px 18px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .18s var(--spring), box-shadow .2s, filter .15s;
  position: relative;
  overflow: hidden;
  letter-spacing: -.01em;
}
.odin-tira::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.18) 0%, transparent 55%);
  pointer-events: none;
}
.odin-tira:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.odin-tira:active { transform: scale(.97); }
.odin-tira-active { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.26); }
.ot-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ot-icon {
  width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  flex-shrink: 0;
}
.ot-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.ot-badge {
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  min-width: 30px;
  height: 30px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
}

/* ══════════════════════════════════════════════════════
   TARJETAS DE NEGOCIO V3 — blanca + ola de color + icono
   (estilo referencia: header curvo de color, icono sobresale,
    cuerpo blanco con nombre oscuro y badge de color)
   ══════════════════════════════════════════════════════ */
.odin-biz-card {
  background: var(--surface, #fff);
  border-radius: 18px;
  border: none;
  padding: 0;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--spring), box-shadow .22s;
  animation: cardAppear .4s ease both;
  box-shadow: 0 3px 14px rgba(0,0,0,.10);
  min-height: 168px;
  display: flex;
  flex-direction: column;
}
.odin-biz-card::before { display: none; }
.odin-card-glow { display: none; }
.odin-card-emoji { font-size: 40px; line-height: 1; }