/****************PRINCIPIOS ******************/
/* ===== Principios (grilla 2×2 con burbujas) ===== */
.principles-card { padding-bottom: 1.25rem; }

.p-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.4rem; /* filas, columnas */
}

.p-item{
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.p-bubble{
  width: 86px; height: 86px; border-radius: 999px;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(255,255,255,.95), rgba(255,255,255,.72) 60%, rgba(255,255,255,.55) 100%),
    linear-gradient(180deg, rgba(180,195,255,.30), rgba(180,195,255,.10));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 20px 40px rgba(13,32,88,.08),
    0 6px 16px rgba(79,140,255,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  backdrop-filter: blur(6px);
}
.p-bubble::after{ /* aro interno sutil */
  content:""; position:absolute; inset:10px; border-radius:50%;
  border: 1px solid rgba(180,195,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  opacity: .7;
}

.p-icon{
  width: 42px; height: 42px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(79,140,255,.25)) saturate(110%);
  opacity: .95;
}

.p-caption{
  margin-top: .55rem;
  font-weight: 600;
  color: var(--text);
  opacity: .9;
  font-size: .95rem;
}

/* Responsivo: un poco más compacta en teléfonos */
@media (max-width: 575.98px){
  .p-bubble{ width: 80px; height: 80px; }
  .p-icon{ width: 38px; height: 38px; }
  .p-grid{ gap: .9rem 1.1rem; }
}