:root{
  --bg-1:#0ea5e9;      /* azul */
  --bg-2:#8b5cf6;      /* violeta */
  --card-bg:rgba(255,255,255,.08);
  --card-stroke:rgba(255,255,255,.25);
  --text:#0f172a;      /* para modo claro */
  --text-contrast:#0b1220;
  --white:#fff;
  --shadow: 0 10px 30px rgba(2,6,23,.15);
  --radius: 22px;
}

/* Grid responsive */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:24px;
  padding: 20px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

/* Tarjetas vidrio */
.card{
  position:relative;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,6,23,.25);
  border-color: rgba(43, 0, 199, 0.45);
}

/* Cinta superior */
.card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, #fff, #e2e8f0 30%, #ffffff80 60%, #fff);
  opacity:.75;
}

/* Encabezado de tarjeta */
.card-header{
  display:flex; align-items:center; gap:12px;
  padding:22px 22px 10px;
  color:#0b1220;
  text-align: center;
}
.card-header i{
  font-size:22px;
  color:#0ea5e9;
}
.card-title{
  font-weight:800; font-size:1.1rem; letter-spacing:.2px;
  color:#0b1220;
  
}

/* Contenido */
.card-content{
  padding: 0 22px 22px;
  color:#111827;
  line-height:1.55;
  font-size: .98rem;
  text-align: center;
}

/* Lista con bullets animados */
.list{
  list-style:none; padding:0; margin:0;
}
.list li{
  display:flex; gap:10px; align-items:start;
  margin:10px 0;
}
.list li::before{
  content:"";
  width:8px; height:8px; margin-top:.5ex;
  border-radius:999px;
  background:#22d3ee;
  box-shadow:0 0 0 0 rgba(34,211,238,.8);
  animation: ping 2s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(34,211,238,.8); }
  70%{ box-shadow:0 0 0 10px rgba(34,211,238,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,211,238,0); }
}

/* Chip para valores */
.badge{
  display:inline-block;
  padding:.45rem .7rem;
  margin: .25rem;
  border-radius:999px;
  background:rgba(0, 0, 0, 0.65);
  border:1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  font-weight:600; font-size:.92rem;
  
}