/* ==========================================================================
   Superficies: la tarjeta blanca y el marco de vidrio del video.
   ========================================================================== */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
}

.card--soft { box-shadow: var(--shadow-soft); }

/* Padding del contenedor del formulario. */
.card--form { padding: 22px 18px 20px; }

/* La tarjeta del doctor lleva la foto a sangre, así que casi no tiene aire. */
.card--doctor { padding: 10px; }

/* Marco translúcido que enmarca el video del hero. */
.glass-frame {
  padding: var(--space-3);
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}