.badge{
  border:1px solid rgb(226 232 240);
  background: rgba(255,255,255,.85);
  color: rgb(51 65 85);
  padding: .25rem .6rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: .75rem;
  box-shadow: 0 1px 2px rgba(2,6,23,.06);
  backdrop-filter: blur(10px);
}

.chip{
  border:1px solid rgb(226 232 240);
  background: rgba(255,255,255,.85);
  color: rgb(51 65 85);
  padding: .45rem .85rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: .875rem;
  box-shadow: 0 1px 2px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.chip:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,.10); }
.chip.is-active{ background: rgb(15 23 42); color: white; border-color: rgb(15 23 42); }

.dot{
  width: .55rem; height: .55rem; border-radius: 9999px;
  background: rgb(148 163 184);
  box-shadow: 0 0 0 4px rgba(148,163,184,.20);
  transition: background .2s ease, box-shadow .2s ease;
}
#toggleModular[aria-pressed="true"] .dot{
  background: rgb(16 185 129);
  box-shadow: 0 0 0 4px rgba(16,185,129,.20);
}

/* Sedes card animation */
.cursos-sedes-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.cursos-sedes-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(2,6,23,.12);
}
.cursos-sedes-glow{
  background: radial-gradient(700px circle at 20% 20%, rgba(16,185,129,.16), transparent 45%),
              radial-gradient(700px circle at 80% 10%, rgba(56,189,248,.14), transparent 45%),
              radial-gradient(700px circle at 60% 90%, rgba(139,92,246,.12), transparent 45%);
}
.cursos-sedes-card:hover .cursos-sedes-glow{ opacity: 1; }

@keyframes badgePop {
  from { opacity:0; transform: translateY(6px) scale(.98); }
  to { opacity:1; transform: translateY(0) scale(1); }
}
.badge-pop{ animation: badgePop .5s ease-out both; }

/* Cards reveal */
@keyframes fadeUp { from{opacity:0; transform: translateY(12px) scale(.985)} to{opacity:1; transform: translateY(0) scale(1)} }
.reveal { animation: fadeUp .55s ease-out both; }

/* ✅ Tilt: como tu ejemplo (más 3D y suave) */
.tilt-card{
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
  cursor: pointer;
}

/* glare overlay */
.tilt-card .tilt-glare{
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms ease-out;
  background: radial-gradient(550px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.65), rgba(255,255,255,0) 55%);
}
.tilt-card:hover .tilt-glare{ opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .chip, .tilt-card, .cursos-sedes-card { transition: none !important; }
  .reveal, .badge-pop { animation: none !important; }
}